Maison > interface Web > js tutoriel > Comment détecter efficacement les mots cliqués dans le texte sans sacrifier les performances ?

Comment détecter efficacement les mots cliqués dans le texte sans sacrifier les performances ?

Patricia Arquette
Libérer: 2024-10-26 15:49:03
original
932 Les gens l'ont consulté

How to Efficiently Detect Clicked Words in Text Without Sacrificing Performance?

Détecter les mots cliqués avec des raffinements

Dans la quête visant à améliorer l'interaction de l'utilisateur avec le texte, il devient nécessaire de détecter les mots sur lesquels les utilisateurs cliquent. Pour résoudre ce problème, une solution impliquait une analyse approfondie des classes à l’aide de jQuery, créant une expérience utilisateur lente et visuellement peu attrayante. À la recherche d'une approche plus élégante, examinons une solution raffinée.

Le code JavaScript suivant offre une méthode simplifiée pour réaliser la détection de mots sans encombrer le document avec des étendues inutiles :

<code class="js">$(".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 &amp;&amp; range.toString().trim() != '');
        
        // Alert result
        var str = range.toString().trim();
        alert(str);
       });</code>
Copier après la connexion

Dans le Document HTML, identifiez le bloc de texte avec la classe "cliquable":

<code class="html"><p class="clickable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum ante nunc. Proin sit amet sem purus. Aliquam malesuada egestas metus, vel ornare purus sollicitudin at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta turpis ut mi pharetra rhoncus. Ut accumsan, leo quis hendrerit luctus, purus nunc suscipit libero, sit amet lacinia turpis neque gravida sapien. Nulla facilisis neque sit amet lacus ornare consectetur non ac massa. In purus quam, imperdiet eget tempor eu, consectetur eget turpis. Curabitur mauris neque, venenatis a sollicitudin consectetur, hendrerit in arcu.
</p></code>
Copier après la connexion

Avec ce code, vous pouvez détecter le mot cliqué sur n'importe quelle partie de la page, ce qui offre une interaction utilisateur plus naturelle sans compromettre les performances .

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal