在Div中获取所选文本的正确位置

Question

我有一个要求，我必须在内容可编辑的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;
}

我将非常感谢你对此的帮助。感谢

Answer 1

当您在可信任的div中选择时，getSelection()会返回Selection对象，其中anchornode类型为＆＃34; text＆＃34;。也就是说，您正在选择包含div的文本节点。当你的div看起来像这样：

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

文本节点是div的唯一子节点。

但是，一旦您做出选择并使用span

进行标记

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

您现在拥有div的三个后代节点：span，span内的文本节点以及div中的文本节点。因此，当您在选择单词＆＃34; Position＆＃34;后得到选择对象的范围时，它将返回相对于div的文本节点的范围，该节点的内容为

" Position of Preview"

（注意单词＆＃34之前的空格;位置＆＃34;）。

所以，＆＃34;位置＆＃34;的偏移量从报告的锚节点开始，它是1。