Détecter les mots cliqués dans le texte avec JavaScript

Lors de la création d'un script JavaScript permettant aux utilisateurs de sélectionner des mots en cliquant dessus, la question se pose : comment cela peut-il être réalisé de manière efficace et élégante ?

Méthode verbeuse utilisant l'analyse de classe

Une méthode courante mais Une approche fastidieuse consiste à analyser l'intégralité du code HTML, à diviser chaque mot séparé par des espaces et à envelopper chaque mot dans un élément . Un écouteur d'événement est ensuite ajouté pour détecter les clics sur la classe de mots, et le mot cliqué est obtenu via $(this).innerHTML. Bien que cette méthode fonctionne, ses performances et son esthétique laissent beaucoup à désirer.

Solution optimisée sans analyse de classe

Pour une solution plus efficace et élégante, considérez ce qui suit :

Étape 1 : Capturer la sélection

Utilisez window.getSelection() pour capturer le nom de l'utilisateur. sélection.

Étape 2 : Identifier les limites des mots

Parcourez la plage de sélection pour déterminer les points de début et de fin du mot cliqué, en évitant les espaces.

Étape 3 : Récupérer le mot cliqué

Combinez les caractères identifiés dans la plage de sélection pour former le mot cliqué word.

Exemple d'implémentation

Le code JavaScript suivant fournit une implémentation pratique de cette solution :

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