我有一个简单的contenteditable div，其中包含一些文本。 Onkeyup事件我想要基于正则表达式替换div的整个内容（innerHTML）。更改innerHTML后更改contenteditable div中的光标位置
例如，
HTML：
some text, more text and $even more text
功能中，我打算让与$所有文本（$即使在上面的例子），并在span标签包装它：
div.onkeypress = function() {
div.innerHTML.replace(/(some_regexp)/, "<span class='class'>$1</span>");
};
问题出在这样的替换光标跳转到div的开始处。我希望它保持原来的位置。
我想我必须在更改之前保存光标的坐标，然后以某种方式使用它们将光标设置回，但我该怎么做？ :)
我试过保存范围对象，但编辑后，我相信它指向无处。
谢谢！
问题是你正在更新整个innerHTML，但只有一小部分正在改变。您不能使用正则表达式和批量替换。您需要扫描div并查找匹配项，从中创建文本范围并用span覆盖内容。请参阅http://www.quirksmode.org/dom/range_intro.html，以编程方式创建范围。
但是，我认为如果光标位于要替换的文本中，这将不起作用，但这是一个开始。
我尝试了你的建议，但即使我使用了范围，插入符的位置也会返回到div的开头。 – carmina 2013-11-27 14:27:48
@carmina很难说，如果你不显示你的代码。但是，如果您有任何问题，请将其作为一个新问题（使用您使用的代码），以便能够正确解决 – 2013-11-27 16:28:53
请参阅：http://stackoverflow.com/questions/20262798/using-insertnode-to -add-a-span-in-a-contenteditable-div-changes-the-cursor-posit – carmina 2013-11-28 10:04:47
你知道你正在替换哪个文本。所以你知道那个文本的位置。只有你会把新的文字。然后位置也是一样的。写完新的html后，可以设置光标。
为如
我不undertsand问题问题
位置是5的我更换
我不undertsand答案
使光标位置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
我把这个从另一个论坛。它解决了我的问题。
好吧，我设法解决它，这里的解决方案，如果任何人的兴趣：
存储选择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();
你可以看到它在这里工作：
我错过了什么吗？跟随链接，选择Live演示。点击该词的中间，右键单击，选择选项并将光标跳到该行的末尾。 – 2011-01-17 17:24:39
什么是替代HTML是什么样子？ – 2010-09-24 16:59:21
我已更新原始问题。如果你知道如何通过其他方式获得预期的行为而不改变整个innerHTML--听起来很棒。 – 2010-09-26 08:37:04
我知道这是一个老问题，但是您是否设法找到了解决方案？我有完全相同的需求 – 2017-05-11 15:21:28