javascript - 更改 innerHTML 后更改 contenteditable div 中的光标位置

Question

我有一个简单的 contenteditable div，里面有一些文本。 在 onkeyup 事件上，我想根据正则表达式替换 div 的全部内容(innerHTML)。

例如，

HTML:

some text, more text and $even more text

我计划使用 $ ($even in above example) 获取所有文本并将其包装在 span 标记中的函数:

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

问题是在这样的替换光标跳转到 div 的开头之后。我希望它保持在原来的位置。

我想我必须在更改之前保存光标的坐标，然后以某种方式使用它们将光标设置回去，但我该怎么做呢？ :)

我尝试保存范围对象，但在编辑后我相信它指向任何地方。

谢谢!

Answer 1

问题是您正在更新整个 innerHTML，但只有一小部分发生了变化。您不能使用正则表达式和 o 批量替换。您需要扫描 div 并查找匹配项，从中创建文本范围并用范围包裹内容。参见 http://www.quirksmode.org/dom/range_intro.html , 以编程方式创建范围。

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