Получение текста в выбранном месте в элементе HTML

Question

У меня есть элемент div, содержащий некоторый текст. Когда пользователь нажимает слово внутри этого элемента, я хочу выделить только это слово.

Чтобы сделать это, мне нужно знать, в какой позиции символа в тексте произошел щелчок, чтобы я мог затем найти близлежащие пробелы и вставить некоторое форматирование вокруг слова.

Узнать, где произошел щелчок в тексте, - вот хитрость. Это возможно?

Answer 1

Если ваша страница генерируется автоматически, вы можете подумать о предварительной обработке страницы, поместив <span class = 'word'> вокруг каждого слова в каждом выбираемом элементе div. Вы могли бы сделать это с помощью javascript после факта, и я думаю, что это было бы вашим решением, но предварительная обработка облегчила бы его.

Проблема использования абсолютной позиции слова заключается в том, что пользователи могут масштабировать свои шрифты, что делает эту задачу особенно сложной. Обернув интервал вокруг каждого отдельного слова, вы можете легко выбрать, какое слово было щелкнуто, применив событие click к элементам span.