Найдите номер строки слова в абзаце с JavaScript

Question

Предположим, у меня очень длинный абзац. Когда я нажимаю на строку, JS/jQuery добавит пустой тег <span> в начале этой конкретной строки - прямо перед первым словом в этой строке.

f.e: Это мой пункт:

<p> 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has. 
</p> 

Когда я нажимаю на второй линии, <span> тег будет вставить перед первым словом во второй строке.

Любые идеи, как это сделать?

Answer 1

jQuery не может обнаружить, где происходит завернутая линия, если это не происходит с жестко запрограммированным перерывом (<br /> или аналогичным).

Это - один из вариантов, хотя он немного взломан.

1. Дубликат контейнер
2. Дайте ему left из -3000 (чтобы сделать его невидимым, без использования display:none потому, что дает ему 0 высота)
3. Удалить одно слово в то время (с использованием .lastIndexOf(' ')), и мера высота каждый раз. Когда он изменяет к наименьшему ненулевой высоте, что, где вы хотите вставить <span>, так что потом ...
4. .substring() с позиции, которую вы только что нашли - .substring(0, position) + '<span>' + .substring(position)

Answer 2

Привет Друг Вы можете найти возможный дубликат здесь в следующей ссылке

Get caret position in contentEditable div

Надеется, что это решает проблему.