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

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>

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>

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!