Как получить индексы выделенной подстроки?

Question

[IDONTSUDO]

Есть строка, например:
11111122221111111

есть то, что пользователь выделил. Например, 122221
Мне нужно узнать индекс последнего и первого элемента которые выделил пользователь, без indexOf()indexLast().

Через getSelection().toString(); я узнаю, что именно выделил пользователь.

Но вот как узнать все остальное?

Comments

[Антон Швец]

вот это чтоль? https://developer.mozilla.org/ru/docs/Web/API/Sele...

Answer 1

[Сергей Соколов]

См. как работать с Selection API.

Метод getRangeAt() вернёт диапазон Range. Выделенных фрагментов может быть и несколько, но в вашем примере понадеемся на единственный getRangeAt(0)

У объекта диапазона Range есть свойства startOffset и endOffset – то, про что спрашиваете.

Comments

[IDONTSUDO]

спасибо

[IDONTSUDO]

выделения это то что я выделил мышкой, в 1 случае оно нормально работает во втором нет.



не знаешь в чем может быть проблема?

[IDONTSUDO]

rangeDinamicPinkText =  data =>{
    var selObj = window.getSelection();
   
    // range = selObj.getRangeAt(index)
    console.log(selObj.getRangeAt(0))
  }

[Сергей Соколов]

IDONTSUDO, выделение может проходить по нескольким элементам. Посмотрите, одно ли оно там

for(let i = 0; i < selObj.rangeCount; i++) {
 console.log( selObj.getRangeAt(i) );
}

[IDONTSUDO]

2 раза одно и тоже

[Сергей Соколов]

IDONTSUDO, два раза? Т.е. там два выделения, хотя видно одно? МОжет одна под другой две формы? В обеих выделяется одновременно?..

[IDONTSUDO]

Сергей Соколов,

на самом деле. Все дело было в теге <textarea>

<label contenteditable="true"></label>.

вот так вот работает. С помощью contenteditable="true" можно переделать див в тег input.

Но суть в том, что мне нужно написать редактор текста в браузере. И Selection API работает немного не так как я ожидал. Так что я думаю просто откажусь от этой идеи. И возьму какой то готовый вариант.