Comment obtenir le mot sous le curseur dans Chrome avec JavaScript ?

Obtenir le mot sous le curseur en JavaScript

Dans le développement Web, il peut être utile de savoir sur quel mot le curseur survole actuellement . Cet article présente une solution JavaScript qui fonctionne spécifiquement dans les navigateurs Chrome.

Présentation de la fonction

La fonction getWordAtPoint prend trois paramètres : un élément (elem), une coordonnée x (x) et une coordonnée y (y). Il utilise l'objet Range pour parcourir le contenu textuel d'un élément HTML et déterminer quel mot se trouve sous le curseur aux coordonnées spécifiées.

Implémentation

La fonction en premier vérifie si l'élément d'entrée est un nœud de texte. Si tel est le cas, il crée un objet Range qui sélectionne le contenu textuel de l'élément. Ensuite, il utilise une boucle pour sélectionner progressivement chaque caractère du texte, en utilisant la méthode getBoundingClientRect() pour déterminer si le rectangle englobant du caractère actuel contient les coordonnées spécifiées. Si une correspondance est trouvée, l'objet Range est développé pour englober le mot entier à l'aide de la méthode expand(). Enfin, la fonction renvoie la représentation sous forme de chaîne du mot.

Si l'élément d'entrée n'est pas un nœud de texte, la fonction parcourt de manière récursive ses nœuds enfants jusqu'à ce qu'elle trouve le nœud de texte contenant les coordonnées spécifiées.

Utilisation

Pour utiliser cette fonction, vous pouvez l'attacher à un gestionnaire d'événement mousemove sur l'élément HTML souhaité. Par exemple :

<code class="javascript">document.addEventListener('mousemove', (e) => {
  const word = getWordAtPoint(e.target, e.x, e.y);
  console.log(word);
});</code>

Ce code enregistrera le mot sous le curseur dans la console chaque fois que l'utilisateur déplace la souris sur l'élément spécifié.

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!