更改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以编程方式创建范围。

但是，我认为如果光标位于要替换的文本中，这将不起作用，但这只是一个开始。