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/

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

3 个答案: