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

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

Например

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

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

Answer 2

способ определить положение/индекс символа щелкнул

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

После этого

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