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

Question

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

我尝试过使用“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>

Answer 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>

Answer 2

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

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

Answer 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;

希望这证明有用