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

Question

我有一个简单的可编辑div，其中包含一些文本。 在onkeyup事件中，我想根据正则表达式替换整个div的内容（innerHTML）。

例如：

HTML：

some text, more text and $even more text

我计划编写一个函数，用于获取所有包含 $ 的文本（即上面的示例），并将其包装在 span 标签中：

```javascript function wrapTextWithSpan() { $("*:contains('$')").each(function() { var text = $(this).text(); var newText = text.replace(/\$/g, "$"); $(this).html(newText); }); } ```

请注意，这个函数会查找文档中的每个元素，如果它包含 $ 则会将其替换为带有“highlight”类的 span 标签。

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

问题是在这样替换之后，光标跳转到 div 的开头。我希望它停留在替换前的位置。 我想象我必须在更改之前保存光标的坐标，然后以某种方式使用它们将光标设置回去，但我应该怎么做呢？ :) 我尝试保存范围对象，但在编辑后，我认为它指向无处。 谢谢！

- Ilya Tsuryev

---

替换后的HTML长什么样？ - Tim Down

我已更新原始问题。如果您知道如何通过其他方式获得预期的行为而不更改整个innerHTML，则非常好听到。 - Ilya Tsuryev

我知道这是一个老问题，你最终找到解决方法了吗？我有完全相同的需求。 - Javis Perez

Answer 1

我从另一个论坛上找到了这篇文章，解决了我的问题。

好的，我设法绕过它了，如果有人感兴趣，这里是解决方案：

存储选择的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/

- Serena

---

我有什么遗漏吗？点击链接，选择Live demo。在单词中间点击，右键，选择选项后，光标跳到了行尾。 - Ilya Tsuryev

Answer 2

问题在于你更新了整个innerHTML，但只有一小部分发生了变化。你不能使用正则表达式进行批量替换。你需要扫描div并查找匹配项，创建文本范围并用span包装内容。请参见http://www.quirksmode.org/dom/range_intro.html，程序化创建一个范围。

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

- Ruan Mendes

---

我试了你的建议，但是即使我使用了range，插入符号位置仍然回到div的开头。 - carmina

@carmina 很难确定如果你不展示你的代码。然而，如果你有问题，请提出一个新的问题（附上你使用的代码），这样才能得到适当的解答。 - Ruan Mendes

请参见：http://stackoverflow.com/questions/20262798/using-insertnode-to-add-a-span-in-a-contenteditable-div-changes-the-cursor-posit - carmina

Answer 3

你知道要替换的文本是哪个。所以你知道那个文本的位置，只有在那里才能放置新的文本。然后位置也是相同的。写完新的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

- zod