Comment détecter efficacement les mots cliqués dans le texte avec JavaScript ?

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 détaillée utilisant l'analyse de classe

Une approche courante mais fastidieuse consiste à analyser l'intégralité du code HTML, en divisant chaque mot séparé par espaces, et en enveloppant 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 la sélection de l'utilisateur.

É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é.

Exemple de mise en œuvre

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);
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!