Javascript 在contenteditable中保留光标位置

我正在尝试使用contenteditable创建richtext区域。高亮显示的解析器返回一个html字符串，我用该字符串替换元素的内容（可能无效，这是目前必须采用的方式）

contenteditable的问题是，类似这样的事情之后，光标位置没有保留，我可以理解

有没有办法保住这个职位？如果这有助于解决问题，我可以让解析器返回一个表示插入符号应该在哪里的元素（给定文本中的游标偏移量）

提前谢谢

我可以让解析器返回一个表示插入符号应该在哪里的元素

那就足够了。假设您解析生成的HTML，现在您有了对

sentinel

中插入符号should be here元素的引用

使用

document.createRange（）

创建DOM范围。让

此处

成为新范围。调用以使范围环绕元素

调用以删除虚拟元素

调用

window.getSelection（）.removeAllRanges（）

清除当前选择，该选择已被HTML更改弄乱

调用

window.getSelection（）.addRange（此处）

将光标放在元素原来所在的位置

---

sentinel

是我的锚元素吗

是的，我想

---

---

如何获取字符串中的光标位置。。。我想要从字符串开始的偏移量

让我们从光标位置开始。窗口选择的第0个范围应该是光标的位置。也就是说，范围的起点和终点位于光标处的同一位置。但是，这些位置的表达方式是面向DOM树的，而不是字符串和偏移量。它们有一个（开始|结束）容器和一个（开始|结束）偏移量。检查DOM规范以了解这些内容的含义

您对某种字符串偏移感兴趣。正如我所理解的，这就像，如果你使用纯文本版本的子树，什么索引对应于这个范围？定义子树的纯文本版本有多种方法。一个是

textContent

属性返回的内容，其中

foo
bar

给出了“foobar”。一些浏览器定义

innerText

，其中

foo
bar

给出“foor\nbar”。您可能已经选择了要使用的，但问题中没有说明

无论如何，这里有一个想法，但它可能不是适合你的应用程序的补偿

将窗口选择设置为从开始（索引0应位于何处）到光标位置的单个范围

---

阅读。在我为之开发的浏览器中，选择对象上的

toString

会给出与

innerText

相当的结果，感谢您的响应。你想详细说明一下吗？我从未使用过您提到的API。此外，下一个问题是获取字符串中的插入符号位置（忽略标记）…当然，只需确定需要细化的内容。如何获取字符串中的光标位置？将有嵌套的html标记，我想要从字符串开始的偏移量。还有，

sentinel

是我的锚元素吗？