строка JavaScript нажала позицию

Question

Если у меня есть строка в div

<div id="article">
 lots of text goes here
<strong> it's really interesting</strong>
and it's free to read
</div>

если пользователь дважды щелкнет или нажмет один раз на определенном слове, есть ли способ определить позицию / индекс символа, по которому щелкнули?

Если это невозможно, как насчет определения количества пробелов перед позицией, по которой щелкнули. Поэтому, если я нажимаю на слово «идет» в приведенном выше примере, он возвращает 3, потому что перед словом идет три пробела, которые нажимаются.

Большое спасибо за ваше время.

Answer 1

способ определения позиции / индекса символа, по которому щелкнули

Ну, во-первых, мне нужно использовать шрифт фиксированной ширины, такой как Courier. Затем я бы создал два пролета только с символом каждый. С этими двумя я должен знать ширину символа (остерегайтесь отступов и полей) и его высоту. Затем вам нужно знать ваши верхние левые координаты для вашего div, чей идентификатор - «article», и захватывать события click с помощью event.x и event.y.

После этого

var line = (event.x - divLeft) / charHeight; 
var column = (event.y - divTop) / charWidth;

Answer 2

Уродливое решение этой проблемы включает программирование преобразования символов в объекты захвата событий.

Например,

<div id="article">
<span>lots </span><span>of </span><span>text</span>...
</div>

Теперь это можно сделать программно.Вы можете получить любой текущий контент div и преобразовать его в формат, описанный выше.Затем присоедините обработчики событий к содержащимся диапазонам, которые подсчитывают количество предшествующих ему диапазонов в том же контейнере.