Как найти индекс выделенного текста в getSelection() с помощью javascript?
Я пытаюсь применить стиль к тексту, выбранному пользователем (перетаскивание мышью), для которого мне нужно получить начальный и конечный индекс выделенного текста.
Я попытался использовать метод "indexOf(...)". но он возвращает первое вхождение выбранной подстроки. Мне нужна фактическая позиция подстроки относительно исходной строки. Например..., если я выбираю букву «O» в позиции 3 [YOLО Cobe], я ожидаю, что индекс будет равен 3, но метод indexOf() возвращает 1, что является первым вхождением «O» в [YО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.info(txt);
var selectedText = getSelectionText();
console.info(selectedText);
var start = txt.indexOf(selectedText);
var end = start + selectedText.length;
if (start >= 0 && end >= 0){
console.info("start: " + start);
console.info("end: " + end);
}
});<div id = "ip">YOLO Cobe</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
То, что вы ищете, доступно внутри объекта, возвращаемого 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.info("start: " + start);
console.info("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.info('start at postion', start, 'in node', selection.anchorNode.wholeText)
console.info('stop at position', end, 'in node', selection.focusNode.wholeText)
});<div><span>Fragment1</span> fragment2 <span>fragment3</span></div>window.getSelection().anchorOffset даст вам индекс, который вы ищете.
Ссылка MDN: https://developer.mozilla.org/en-US/docs/Web/API/Selection/anchorOffset
Я попытался использовать anchorOffset и focusOffset из метода getSelection(), и он не дал мне желаемого индекса.
Поэтому я сам придумал это решение (Примечание: оно работало в хроме, не знаю о других браузерах)
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");
В данном случае выделена фраза «здесь и завтра».
Для выделенного текста я сделал
input.value = getSelection();
let selectedText = input.value;
Для начального индекса выделенного текста я сделал
let start = body.value.indexOf(getSelection());
let end = start + selectedText.lenght;
Надеюсь, это окажется полезным
ваш код не будет работать для повторяющегося текста, и мы выбираем второе вхождение.
baseOffset — это особенность Chrome. Официальная собственность
anchorOffset. Кроме того, вы можете указать, что они упорядочены в порядке выбора (то есть, если вы выбрали справа налево, они могут иметьstart: 7 end: 2, а также что эти индексы относятся к их собственным[anchor/focus]Node. Они могут быть не одним и тем же узлом.