Rumah > hujung hadapan web > tutorial js > Bagaimana Mengesan Perkataan yang Diklik dengan Cekap dalam Teks Tanpa Mengorbankan Prestasi?

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

Patricia Arquette
Lepaskan: 2024-10-26 15:49:03
asal
931 orang telah melayarinya

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

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan