更改innerHTML后，在contenteditable div中更改光標位置

Question

我有一個簡單的contenteditable div，里面有一些文字。 在onkeyup事件上，我想基於正則表達式替換div的整個內容（innerHTML）。

例如，

HTML：

some text, more text and $even more text

函數我計划用$（$甚至在上面的例子中）獲取所有文本並將其包裝在span標記中：

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

問題是在這樣的替換光標跳轉到div的開頭之后。 我希望它能保持原狀。

我想我必須在更改之前保存光標的坐標，然后以某種方式使用它們設置光標，但我該怎么辦？ :)

我嘗試保存范圍對象，但編輯后我相信它指向無處。

謝謝！

Answer 1

問題是你正在更新整個innerHTML，但只有一小部分正在改變。 您不能使用正則表達式和批量替換。 您需要掃描div並查找匹配項，從中創建文本范圍並使用span包裝內容。 請參閱http://www.quirksmode.org/dom/range_intro.html ，以編程方式創建范圍。

但是，我認為如果光標位於要替換的文本中，這將不起作用，但這是一個開始。

Answer 2

您知道要替換哪個文本。 所以你知道那個文本的位置。 只有你要把新文本。 然后位置也一樣。寫完新的html后，你可以設置光標。

例如

我不會遺漏這個問題

問題的位置是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

Answer 3

我從另一個論壇拿走了這個。 它解決了我的問題。

好的，我設法解決它，如果有人感興趣的話，這是解決方案：

存儲選擇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/