Javascript 获取Div中选定文本的正确位置

我有一个要求，我必须在一个内容可编辑的div中找到所选文本的位置。一旦我选择了文本中的一个单词，我会通过在该单词周围加上一些css来突出显示它。我还得到突出显示的单词的起始位置

问题是，如果我已经突出显示了索引0处的一个单词，然后我尝试选择/突出显示一个单词，例如在div的索引10处，那么我得到的位置是错误的

以下是一张供参考的图片：

看看突出显示的单词“位置”是如何作为索引1向我报告的，而它显然应该是8

以下是我选择所选文本位置的代码：

var sel, range;
if (window.getSelection) {
  sel = window.getSelection();
  if (sel.rangeCount) {
    range = sel.getRangeAt(0).cloneRange();
    return range.startOffset;
  }
}
else {
  return null;
}

---

我非常感谢你在这方面的帮助。谢谢

当您在contenteditable div内选择时，

getSelection（）

返回一个

Selection

对象，该对象具有

anchornode

类型的“文本”。也就是说，您正在选择包含

div

的文本节点。当您的div看起来像这样时：

<div contenteditable="true">Testing Position of Preview</div>

现在有三个div的子节点：span、span内的text节点和div内的text节点。因此，当您在选择单词“Position”后返回选择对象的范围时，它将返回相对于div的text节点的范围，其中包含

" Position of Preview"

（注意“位置”一词前的空格）

---

所以，正如所报告的，“位置”的偏移量是从其锚节点开始的1。

我想你是指位置？因为它是通过文字表达的，所以它完全是accurate@SamCreamer我需要获取所选单词的第一个字符的开始索引。如何获取文本的位置，而不是相对于div的textnode？或者在这种情况下是不可能的？仅仅使用

选择

对象肯定不容易。还要考虑如果一个选择包含一个已经标记的范围，那么选择对象现在包含一个以上的节点会发生什么。我的意思是，我可以使用什么与选择对象相结合？我不知道你可以使用任何单一的API。您可以基于选择对象重建节点，或者，如果您绝对必须在其格式化节点的上下文之外计算文本，请在根节点的

innerText

属性上使用模式匹配。

" Position of Preview"