Как найти индекс выделенного текста в getSelection () с помощью JavaScript?

Question

Я пытаюсь применить стиль к тексту, выбранному пользователем (перетаскивание мышью), для которого мне нужно получить начальный и конечный индексы выделенного текста.

Я пытался использовать метод indexOf (...).но он возвращает первое вхождение выбранной подстроки.Я хочу фактическое положение подстроки по отношению к исходной строке.Например, если я выберу букву 'O' в позиции 3 [YOL O Cobe], я ожидаю, что индекс равен 3, но метод indexOf () возвращает 1, что является первым вхождением 'O'в [Y O LO Cobe].

Есть ли какой-либо другой способ получения фактического начального и конечного индекса выделенного текста, а не первого вхождения?

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().anchorOffset даст вам индекс, который вы ищете.

MDN ссылка: https://developer.mozilla.org/en-US/docs/Web/API/Selection/anchorOffset

Answer 2

То, что вы ищете, доступно внутри объекта, возвращаемого 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>