如何使用 javascript 在 getSelection() 中查找所选文本的索引？

Posted 2023-02-22

【中文标题】如何使用 javascript 在 getSelection() 中查找所选文本的索引？

【英文标题】：How to find index of selected text in getSelection() using javascript?

【发布时间】：2019-10-27 16:01:49

【问题描述】：

我正在尝试将样式应用于用户选择的文本（鼠标拖动），我需要为其获取所选文本的开始和结束索引。

我尝试过使用“indexOf(...)”方法。但它返回所选子字符串的第一次出现。我想要子字符串相对于原始字符串的实际位置。例如..，如果我在位置 3 [YOLO Cobe] 选择字母“O”，我希望索引为 3，但 indexOf() 方法返回 1，这是第一次出现 ' [YOLO Cobe] 中的 O'。

是否有任何其他方法可以获取所选文本的实际开始和结束索引而不是第一次出现？

function getSelectionText()

    var text = "";
    if (window.getSelection) 
        text = window.getSelection().toString();
    
    return text;

document.getElementById('ip').addEventListener('mouseup',function(e)

        var txt=this.innerText;
        console.log(txt);
        var selectedText = getSelectionText();
        console.log(selectedText);
        var start = txt.indexOf(selectedText);
        var end = start + selectedText.length;
        if (start >= 0 && end >= 0)
    	    console.log("start: " + start);
    	    console.log("end: " + end);
        
);

<div id="ip">YOLO Cobe</div>

【参考方案1】：

您要查找的内容在window.getSelection() 返回的对象中可用

document.getElementById('ip').addEventListener('mouseup',function(e)

        var txt = this.innerText;
        var selection = window.getSelection();
        var start = selection.anchorOffset;
        var end = selection.focusOffset;
        if (start >= 0 && end >= 0)
    	    console.log("start: " + start);
    	    console.log("end: " + end);
        
);

<div id="ip">YOLO Cobe</div>

以下是基于@Kaiido 评论的页面上更复杂选择的示例：

document.addEventListener('mouseup',function(e)

        var txt = this.innerText;
        var selection = window.getSelection();
        var start = selection.anchorOffset;
        var end = selection.focusOffset;
        console.log('start at postion', start, 'in node', selection.anchorNode.wholeText)
        console.log('stop at position', end, 'in node', selection.focusNode.wholeText)
);

<div><span>Fragment1</span> fragment2 <span>fragment3</span></div>

【讨论】：

baseOffset 是 Chrome 的一个怪癖。官方财产是anchorOffset。此外，您可能想指出这些是按选择顺序排序的（也就是说，如果您从右到左选择可能有 start: 7 end: 2 并且这些索引相对于它们自己的 [anchor/focus]Node。它们可能不是同一个节点。

【参考方案2】：

window.getSelection().anchorOffset 将为您提供您正在寻找的索引。

MDN 链接：https://developer.mozilla.org/en-US/docs/Web/API/Selection/anchorOffset

【参考方案3】：

我尝试使用getSelection() 方法中的anchorOffset 和focusOffset，但它没有给我所需的索引。

所以我自己想出了这个解决方案（注意：它在chrome中工作，不知道其他浏览器）

html

<input type="text" class="input" hidden />
<textarea> remind me to be here to morrow </textarea>

JS

let text = document.querySelector("textarea");
let input = document.querySelector(".input");

在本例中，“here to morrow”是突出显示的部分。

对于我选择的文本

input.value = getSelection();
let selectedText = input.value;

对于所选文本的起始索引，我做了

let start = body.value.indexOf(getSelection());
let end = start + selectedText.lenght;

希望这证明有用

【讨论】：

您的代码不适用于重复文本，我们选择第二次出现。