更改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/