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

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似乎不是一个选项，因为光标选择的术语可以是任意的，因此没有模式，也不能保证它是唯一的。

• 我最近发布了一个非常相似的问题，该问题被标记为重复，因为有一个解决这个问题的方法（使用selectionStartand selectionEnd），但要让它工作，你必须使用<textarea>这个用例不可能的 a 。

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

限制：

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

标签： javascripthtml

Answer 1

您需要询问由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);

小提琴