Bagaimanakah Saya Boleh Menyerlahkan Perkataan Khusus dalam Teks Menggunakan jQuery?

Serlahkan Perkataan dengan jQuery

Soalan:

Serlahkan perkataan tertentu dalam blok teks. Contohnya, serlahkan "dolor" dalam teks berikut:

<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

Hasil Jangkaan:

<p>
    Lorem ipsum <span class="myClass">dolor</span> sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer <span class="myClass">dolor</span> ullamcorper
    libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

Penyelesaian jQuery:

Ya, adalah mungkin untuk mencapai kesan ini menggunakan jQuery. Coretan kod berikut menyediakan penyelesaian:

$.fn.highlight = function(word) {
  var pattern = word.replace(/[-[\]{}()*+?.,\^$|#\s]/g, "\$&"");
  return this.each(function() {
    $(this).html($(this).html().replace(new RegExp("(" + pattern + ")", "gi"), "<span class='highlight'>$&amp;</span>"));
  });
};

$("p").highlight("dolor");

Penjelasan:

1. $.fn.highlight ialah fungsi jQuery tersuai yang mengambil perkataan sebagai parameter.
2. Pembolehubah corak mencipta corak ungkapan biasa dengan melepaskan aksara khas dalam perkataan.
3. Setiap fungsi berulang ke atas semua elemen yang dipadankan (teg perenggan dalam kes ini) dan menggantikan kemunculan perkataan dengan teg yang dililitkan di sekelilingnya.
4. Akhir sekali, baris $("p").highlight("dolor") memanggil fungsi tersuai, menghantar "dolor" sebagai perkataan menjadi diserlahkan.

Nota:

Terdapat banyak penyelesaian berasaskan jQuery dan pemalam luaran lain tersedia, memenuhi keperluan khusus dan menawarkan ciri tambahan. Terokai pilihan ini untuk mencari yang paling sesuai dengan keperluan anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyerlahkan Perkataan Khusus dalam Teks Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!