使用JS高亮显示可编辑div中的选定文本

Question

我不知道如何在可编辑的div中突出显示所选文本（当它包含许多标签（嵌套）时）。

如果我能从选择开始的地方得到确切的位置（可编辑div中的索引，innerHTML），我可以在那里添加一个带有背景颜色样式的字体标记（提供高亮显示的效果）。但我无法找到一种可靠的方法来从选择的起点获得索引。

我的示例代码位于：sample。

"window.getSelection（）；"方法为我提供了所选内容的完整文本，包括嵌套标记（如果我在上面使用innerHTML）。因此，我所需要的只是一种可靠的方法来计算从哪里开始选择的开始索引。

非常感谢任何帮助/参考。

编辑：假设我的oDiv有内容：<br><br><h2>我是h2，标题<h2>

假设我在上面选择H2，我需要起始索引为：19（计算oDiv内的所有标签）。我怎么能拿到？我需要它为任意深度嵌套工作。

Answer 1

var r = window.getSelection().getRangeAt(0);-给出了选择范围。

r.startOffset、r.endOffset-为您提供选择范围的边界。

如果您感兴趣的div有一个id，那么您可以通过以下方式获取元素：

var objDiv = document.getElementById("divId");
var r = document.createRange();
r.selectNodeContents(objDiv);

如果元素没有id，那么还有其他方法可以获取对象。请参阅此处：查找HTML元素

现在，您可以使用startOffset和endOffset属性来获得范围r的边界。