16

テキストを含む単純な contenteditable div があります。onkeyup イベントで、正規表現に基づいて div のコンテンツ全体 (innerHTML) を置き換えたいと考えています。

例えば、

HTML:

some text, more text and $even more text

すべてのテキストを $ (上記の例では $even ) で取得し、span タグでラップする予定の関数:

div.onkeypress = function() { 
     div.innerHTML.replace(/(some_regexp)/, "<span class='class'>$1</span>"); 
};

問題は、そのような置換カーソルがdivの先頭にジャンプした後です。昔のままでいてほしい。

変更する前にカーソルの座標を保存し、それらを使用してカーソルを元に戻す必要があると思いますが、どうすればよいですか? :)

範囲オブジェクトを保存しようとしましたが、編集後、どこにも指していないと思います。

ありがとう！

4

3 に答える 3

2

問題は、innerHTML全体を更新しているが、変更されているのはごく一部にすぎないことです。正規表現と一括置換は使用できません。divをスキャンして一致するものを探し、それらからテキスト範囲を作成して、コンテンツをスパンでラップする必要があります。http://www.quirksmode.org/dom/range_intro.html、プログラムによる範囲の作成を参照してください。

ただし、カーソルが置き換えられるテキスト内にある場合、これは機能しないと思いますが、それは始まりです。

于 2010-09-28T16:57:39.193 に答える
2

これは別のフォーラムから取得しました。それは私の問題を解決しました。

わかりました、私はそれを回避することができました。誰かが興味を持っている場合の解決策は次のとおりです。

選択 x、y を保存します。

コード：

cursorPos=document.selection.createRange().duplicate();
clickx = cursorPos.getBoundingClientRect().left; 
clicky = cursorPos.getBoundingClientRect().top;

選択を復元します。

コード：

cursorPos = document.body.createTextRange();
cursorPos.moveToPoint(clickx, clicky);
cursorPos.select();

ここで動作することがわかります：

http://www.tachyon-labs.com/sharpspell/

于 2011-01-17T17:07:49.577 に答える
1

置き換えるテキストがわかります。だからあなたはそのテキストの位置を知っています。そこにあなただけが新しいテキストを置くつもりです。それでも位置は同じです。新しいhtmlを書き込んだ後、yuはカーソルを設定できます。

例えば

私は質問を理解していません

質問の位置は5です私はそれを交換します

私は答えを理解していません

カーソル位置を5にします

http://ajaxian.com/archives/javascript-tip-cross-browser-cursor-positioning

http://hartshorne.ca/2006/01/23/javascript_cursor_position/

http://geekswithblogs.net/svanvliet/archive/2005/03/24/textarea-cursor-position-with-javascript.aspx

于 2010-09-30T18:05:44.657 に答える