jscriptでコンテンツを編集した後、contenteditableにキャレットポジションを維持する

Question

各テキストの変更後にコンテンツが編集されているcontenteditable divがある（textchange.js）HTMLタグを追加するようなもの（一部の単語の色を変更するスパンタグのみ）、ここでいくつかの空白を追加または削除していますが、ユーザーが編集中にコンテンツが変更されているので、キャレットはキーを押すたびに位置が変わります。 私はこのジャンプを回避する方法を探していますが、私はすでに編集前のキャレットの位置で一種のマーカーとして使用されない特殊な文字を追加することを考えました。それが終了したら、キャレットをこの位置に戻しますが、私はregexをたくさん使っています（現在は各textchangeの約25回後です）。この特殊文字はほぼすべて1つ1つを壊してしまい、\x40?全然いいと明確になりませんすべての場所、：

/\s<span class="b0">hello\sworld</span>/g 

へ：

/\s\x40?<span class="b0">\x40?h\x40?e\x40?l\x40?l\x40?o\x40?\s\x40?w\x40?o\x40?r\x40?l\x40?d\x40?</span>/g 

それは役立ちますが、ここで内容は（各キーの押下後に）どのように変化するかについての例であれば、私は知らない。

foo +++ <span class="c3">bar</span> - baz -<span class="c0">qux</span> 

へ：

<span class="c1">foo</span> + <span class="c3">bar</span> - <span class="c1">baz</span> * <span class="c0">qux</span> 

私はすべてのアドバイスに感謝するだろう、この問題を解決する方法のヒント、またはこのマーカーを行うためのよりよい方法について説明します。

ありがとうございました:)

Answer 1

あなたがそうでなければ読みやすい正規表現に特殊文字を追加する抽象化を作成することができます。シンプルで、おそらくあなたの現在のコードに最小限の変更が必要です。

もっと洗練されたソリューションがあるかもしれません。真ん中にキャレットがあるテキストを置換することが決してない場合（repl|acedなど）、元の文字列を2つに分割して両方の部分にフィルタを適用できます。キャレットの位置は、最初の要点の長さにある分割にとどまります。

キャレット位置でも置き換える必要がある場合は、とにかく分割を開始できます。その後、フィルタを1つずつもう一度実行します。フィルタが一致した場合、キャレットを所定の相対位置に移動します。たとえば、++|+（キャレットを表すパイプ）を××に置き換えます。あなたはそれを可能にすることもでき、××|になります。キャレットを適切な場所に移動することができます（<|i></i>を<em>|<em>に置き換えて、キャレットをユーザーが必要とする場所に移動すると便利だと考えてください） ）。

Answer 2

おそらくこれは最適な解決策ではありませんが、私は2つのdivを作成しました.1つはテキストを表示し、もう1つは編集し、もう1つは最初のものを上書きし、透明度を付けました。

<div style="position: absolute; left: 48px; top: 16px;" unselectable="on" onselectstart="return false"> 
    <code id="code_show">Type here.</code> 
</div> 
<div style="position: absolute; left: 48px; top: 16px;"> 
    <span style="opacity:0.33"><code id="code_area" contenteditable="true" onkeyup="colorize();">Type here.</code></span> 
</div> 

onselectstart="return false"とunselectable="on"最初のものが選択できないことを確認します。このよう

。 onkeyup="colorize();"は、ユーザがテキストを編集するためにキーを押すたびにjavascript関数colorizeが必ず呼び出されるようにします。

code_showの内容をcode_areaのものと一致するように定義する必要がありますが、色は変更しないでください。例えば

、このコードは赤色ですべての単語RED塗料：

<script> 
function colorize(){ 
    var code_area= document.getElementById('code_area'); 
    var code_show= document.getElementById('code_show'); 

    var inner= code_area.innerHTML; 
    inner= inner.replace(/RED/g,"<span style=\"color: red\">RED</span>"); 
    code_show.innerHTML= inner; 
} 
</script>