使用JS突出显示可编辑div中的选定文本

Question

我无法弄明白，如何突出显示可编辑div中的选定文本（当它包含许多标签（嵌套）时）。

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

我的示例代码位于：Sample。

“window.getSelection（）;”方法为我提供了所选内容的完整文本，包括嵌套标签（如果我在其上使用innerHTML）。因此，我只需要一种可靠的方法来计算选择开始的起始指数。

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

修改： 假设我的oDiv有内容： 我是H2，标题＆lt; / h2＆gt;

并说我选择上面的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，那么还有其他方法可以获取对象。见这里：Finding HTML Elements

现在，您可以使用r和startOffset属性获取范围endOffset的范围。