使用 JS 在可编辑 div 中突出显示所选文本
Highlight the selected text in editable div using JS
我不知道如何在可编辑的 div 中突出显示 selected 文本（当其中包含许多标签（嵌套）时）。
如果我能得到 selection 开始的确切位置（索引在可编辑的 div、innerHTML 中），我可以在那里添加一个带有背景颜色样式的字体标签（给出高光效果）。但是我无法找到一种可靠的方法来从 selection 开始的地方获取索引。
我的示例代码位于：Sample.
"window.getSelection();" 方法为我提供了 selected 内容的完整文本，包括嵌套标签（如果我在其上使用 innerHTML）。因此，我所需要的只是一种可靠的方法来计算 selection 开始的起始索引。
非常感谢help/reference。
编辑：
假设我的 oDiv 有内容：
我是H2，标题
并说我在上面 select H2，我需要起始索引为：19（计算 oDiv 内的所有标签）。我怎样才能得到它？我需要它来处理任意深度嵌套。
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
现在您可以使用 startOffset 和 endOffset 属性获取范围 r 的边界。
我不知道如何在可编辑的 div 中突出显示 selected 文本（当其中包含许多标签（嵌套）时）。
如果我能得到 selection 开始的确切位置（索引在可编辑的 div、innerHTML 中），我可以在那里添加一个带有背景颜色样式的字体标签（给出高光效果）。但是我无法找到一种可靠的方法来从 selection 开始的地方获取索引。
我的示例代码位于：Sample.
"window.getSelection();" 方法为我提供了 selected 内容的完整文本，包括嵌套标签（如果我在其上使用 innerHTML）。因此，我所需要的只是一种可靠的方法来计算 selection 开始的起始索引。
非常感谢help/reference。
编辑：
假设我的 oDiv 有内容：
我是H2，标题
并说我在上面 select H2，我需要起始索引为：19（计算 oDiv 内的所有标签）。我怎样才能得到它？我需要它来处理任意深度嵌套。
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
现在您可以使用 startOffset 和 endOffset 属性获取范围 r 的边界。