Javascript 获取所选文本的索引

给定以下HTML：

<div>
    <span>This </span>
    <span>is </span>
    <span>plain </span>
    <span>text </span>
    <span>and </span>
    <span>this </span>
    <span>is </span>
    <span>more </span>
    <span>plain </span>
    <span>text </span>
    <span>and </span>
    <span>this </span>
    <span>is </span>
    <span>the </span>
    <span>final </span>
    <span>plain </span> 
    <span>text</span>
</div>

这
是
平原
正文
及
这
是
更多
平原
正文
及
这
是
这个
最终的
平原
文本

显示为：

这是纯文本，这是更纯的文本，这是最终的 纯文本

请注意：

标记用于其他用途

我希望能够突出显示（光标选择）上述文本的任何部分，并获得光标选择文本的开始和结束索引。例如，以下光标选择（光标选择术语“纯文本”的第二次出现）将输出

startIndex=35

和

endIndex=44

已尝试的内容和想法：

• 现在，我使用

  var text=window.getSelection（）.toString（）获取光标选中的文本
  

• 使用诸如

  indexOf

  和

  lastIndexOf

  之类的函数似乎不是一个选项，因为光标选择的术语可能是任意的，因此没有模式，也不能保证它是唯一的

• 我最近发布了一个非常类似的问题，该问题被标记为重复问题，因为这个问题有一个解决方案（使用

  selectionStart

  和

  selectionEnd

  ），但要实现这一点，您必须使用
  ，这在本用例中是不可能的

• 我觉得，
  标签的奇怪用法可能会在某种程度上被利用；特别是因为它是根据需要添加任何

  id

  s（或其他属性）的选项

限制：

• 使用
  而不是
  不是此场景的选项

---

您需要查询由

getSelection（）

返回的文件的各种属性

您特别感兴趣的是：

• anchorNode

  -开始选择的元素

• anchorOffset

  -选择开始于的

  anchorNode

  中字符的索引

• focusNode

  -选择结束的元素

• focusOffset

  -选择在

  focusNode

  中结束的字符索引

然后是做DOM迭代和一些数学的例子

综合起来：

let div = document.querySelector('div'),
    text = div.innerText;
div.addEventListener('mouseup', evt => {
    let sel = getSelection(),
        result = {start: null, end: null};
    if (!sel) return;
    ['start', 'end'].forEach(which => {
        let counter = 1,
            tmpNode = div.querySelector('span'),
            node = which == 'start' ? 'anchor' : 'focus';
        while(tmpNode !== sel[node+'Node'].parentElement) {
            result[which] += tmpNode.innerText.length;
            counter++;
            tmpNode = div.querySelector('span:nth-child('+counter+')')
        }
        result[which] += sel[node+'Offset'] + (which == 'start' ? 1 : 0);
    });
    alert('Selection starts at '+result.start+' and ends at '+result.end);
}, false);

---

不确定问题出在哪里？预期结果是什么？光标所选术语相对于整个字符串的开始和结束索引。如果我有字符串“hello Bob，hello Bill”，我用光标选择第二个

“hello”

，那么结果应该是

startIndex=10

和

endIndex=14

。