Detectar palavras clicadas no texto com JavaScript

Ao criar um script JavaScript que permite aos usuários selecionar palavras clicando nelas, a pergunta surge: como isso pode ser alcançado de forma eficiente e elegante?

Método detalhado usando análise de classe

Um método comum, mas A abordagem tediosa envolve analisar todo o HTML, dividir cada palavra separada por espaços e agrupar cada palavra em um elemento . Um ouvinte de evento é então adicionado para detectar cliques na classe de palavras, e a palavra clicada é obtida por meio de $(this).innerHTML. Embora esse método funcione, seu desempenho e estética deixam muito a desejar.

Solução otimizada sem análise de classe

Para uma solução mais eficiente e elegante, considere o seguinte:

Etapa 1: Capturar seleção

Use window.getSelection() para capturar a seleção do usuário seleção.

Etapa 2: Identificar limites da palavra

Iterar sobre o intervalo de seleção para determinar os pontos inicial e final da palavra clicada, evitando espaços.

Etapa 3: recuperar a palavra clicada

Combine os caracteres identificados dentro do intervalo de seleção para formar a palavra clicada word.

Exemplo de implementação

O código JavaScript a seguir fornece uma implementação prática desta solução:

$(".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);
});