获取光标选择的文本的索引

Question

给出以下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>

显示为：

  

这是纯文本，这是更多纯文本，这是最终版本   纯文本

请注意：<span>标签被用于其他目的。

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

尝试过的东西和想法：

• 现在我正在使用var text = window.getSelection().toString();

获取光标选择的文本

• 使用诸如indexOf和lastIndexOf之类的功能似乎不是一个选择，因为光标选择的术语可以是任意的，因此不存在任何模式，并且不能保证这将是唯一的。

• 我最近发布了一个非常相似的问题，该问题被标记为重复问题，因为有一个针对此问题的解决方案（使用selectionStart和selectionEnd），但是要解决这个问题使用<textarea>，在这种情况下是不可能的。

• 我觉得<span>标签的奇怪用法也许可以某种方式利用；尤其是因为可以根据需要添加任何id（或其他属性）。

限制：

• 在这种情况下，不能选择使用<textarea>而不是<div>。

Answer 1

您需要查询BroadcastReceiver返回的selection object的各种属性。

您特别感兴趣的是：

• getSelection()-选择开始的元素
• anchorNode-选择中的anchorOffset中字符的索引始于
• anchorNode-选择结束的元素
• focusNode-选择中focusOffset中字符的索引结束于

然后是进行DOM迭代和一些数学运算的情况。

将它们放在一起：

focusNode

Fiddle