Bagaimana Mengesan Perkataan yang Diklik dengan Cekap dalam Teks Tanpa Mengorbankan Prestasi?

Kesan Perkataan yang Diklik dengan Penapisan

Dalam usaha untuk meningkatkan interaksi pengguna dengan teks, keperluan timbul untuk mengesan perkataan yang diklik oleh pengguna. Untuk menangani perkara ini, satu penyelesaian melibatkan penghuraian kelas yang meluas menggunakan jQuery, mewujudkan pengalaman pengguna yang lembap dan tidak menarik secara visual. Mencari pendekatan yang lebih elegan, mari kita mendalami penyelesaian yang diperhalusi.

Kod JavaScript berikut menawarkan kaedah yang diperkemas untuk mencapai pengesanan perkataan tanpa mengacaukan dokumen dengan rentang yang tidak perlu:

<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>

Dalam Dokumen HTML, kenal pasti blok teks dengan kelas "boleh diklik":

<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>

Dengan kod ini, anda boleh mengesan perkataan yang diklik pada mana-mana bahagian halaman, yang menyediakan interaksi pengguna yang lebih semula jadi tanpa menjejaskan prestasi .

Atas ialah kandungan terperinci Bagaimana Mengesan Perkataan yang Diklik dengan Cekap dalam Teks Tanpa Mengorbankan Prestasi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!