Получить позицию текста внутри элемента

Если у меня есть элемент, например:

<p>Lorem ipsum dolor sit amet, ante risus massa adipiscing quisque quis. At mauris tellus in, sed vehicula integer fermentum rhoncus at faucibus, in vitae purus. Maecenas in vel ligula orci tellus ac, fringilla conubia lorem elit. Dui nulla sodales morbi vel. Massa sed viverra. Maecenas imperdiet donec urna a, ligula sed</p>

И это протекало через несколько строк:

Lorem ipsum dolor sit amet, ante risus massa adipiscing
quisque quis. At mauris tellus in, sed vehicula integer
fermentum rhoncus at faucibus, in vitae purus. Maecenas
in vel ligula orci tellus ac, fringilla conubia lorem
elit. Dui nulla sodales morbi vel. Massa sed viverra.
Maecenas imperdiet donec urna a, ligula sed

Можно ли узнать положение (в х, у коордов) конкретного символа в тексте с помощью JavaScript? В противном случае я могу получить позицию y каждой строки в тексте?

Обратите внимание. В моем приложении много тега в теге <p>, поэтому добавление <span> вокруг каждого символа/слова будет слишком большим.

Ответ 1

Если вы знаете строковое положение символа в тексте, вы можете обернуть символ в <span> или аналогичный элемент с идентификатором и найти координаты x, y этого элемента. Самый простой способ сделать это - с помощью jQuery или другой библиотеки, см. этот ответ для кросс-браузерного метода без библиотеки.

Ответ 2

Вы можете использовать диапазоны, чтобы найти положение элементов. Быстрый jsfiddle здесь: https://jsfiddle.net/abrady0/ggr5mu7o/

var range = document.createRange();
range.setStart(parentElt, start);
range.setEnd(parentElt, end);
// These rects contain the client coordinates in top, left
var rects = range.getClientRects();

Изменить: изменено, чтобы распечатать координаты совпадающего прямоугольника

Ответ 3

Идея, которую я получаю, - получить весь текст, упаковать требуемую подстроку в span-s, заменить innerHTML элемента и получить положение span-s