Определять слова, на которые щелкают мышью, в тексте с помощью JavaScript

При создании сценария JavaScript, который позволяет пользователям выбирать слова, щелкая по ним, возникает вопрос возникает вопрос: как этого можно достичь эффективно и элегантно?

Многословный метод с использованием класса Синтаксический анализ

Обычный, но утомительный подход включает в себя анализ всего HTML, разделение каждого слова, разделенного пробелами, и обертывание каждого слова в элемент . Затем добавляется прослушиватель событий для обнаружения кликов по классу слов, а слово, по которому щелкнули, получается через $(this).innerHTML. Хотя этот метод работает, его производительность и эстетика оставляют желать лучшего.

Оптимизированное решение без анализа классов

Для более эффективного и элегантного решения рассмотрите следующее:

Шаг 1. Захват выделения

Используйте window.getSelection() для захвата выбор пользователя.

Шаг 2. Определите границы слов

Пройдитесь по диапазону выбора, чтобы определить начальную и конечную точки выбранного слова, избегая пробелов.

Шаг 3. Получите выбранное слово

Объедините идентифицированные символы в пределах диапазона выбора, чтобы сформировать слово, по которому щелкнули.

Пример реализации

Следующий код JavaScript обеспечивает практическую реализацию этого решения:

$(".clickable").click(function (e) {
  s = window.getSelection();
  var range = s.getRangeAt(0);
  var node = s.anchorNode;

  // Find starting point
  while (range.toString().indexOf(' ') != 0) {
    range.setStart(node, (range.startOffset - 1));
  }
  range.setStart(node, range.startOffset   1);

  // Find ending point
  do {
    range.setEnd(node, range.endOffset   1);
  } while (
    range.toString().indexOf(' ') == -1 &&
    range.toString().trim() != ''
  );

  // Alert result
  var str = range.toString().trim();
  alert(str);
});