Bagaimana Saya Boleh Mencipta Kesan Serlahkan Teks Sekali dengan JavaScript?

Menyerlahkan Teks dengan JavaScript: Tumpuan Satu Kali

Apabila ia datang untuk menyerlahkan teks dalam halaman web, kami sering menggunakan kaedah lalai fungsi pelayar. Walau bagaimanapun, bagaimana jika anda memerlukan kesan penyerlahan yang tepat dan sekali? Begini cara anda boleh mencapainya menggunakan JavaScript.

Kesan sorotan jQuery menyediakan penyelesaian yang mudah untuk penyerlahan teks. Tetapi jika anda mencari pendekatan JavaScript mentah, pertimbangkan coretan kod berikut:

function highlight(text) {
  const inputText = document.getElementById("inputText");
  const innerHTML = inputText.innerHTML;
  const index = innerHTML.indexOf(text);

  if (index >= 0) {
    innerHTML =
      innerHTML.substring(0, index) +
      `<span class='highlight'>` +
      innerHTML.substring(index, index + text.length) +
      `</span>` +
      innerHTML.substring(index + text.length);
    inputText.innerHTML = innerHTML;
  }
}

Untuk memadankan kesan penyerlahan kami dengan teks yang ingin kami serlahkan, kami menggunakan beberapa peraturan CSS:

.highlight {
  background-color: yellow;
}

Sekarang, mari kita susun semuanya. Kami mencipta elemen HTML dengan ID "inputText" di mana kami mahu penyerlahan berlaku. Kami juga menambah butang dengan acara onclick yang mencetuskan fungsi "serlahkan".

<button onclick="highlight('fox')">Highlight</button>

<div>

Dengan mengklik butang "Serlah", kod JavaScript mengesan kejadian pertama "musang" dalam teks dan melampirkan ia dalam elemen dengan kelas "serlahkan". Elemen span ini menggunakan warna latar belakang kuning, menjadikan teks "musang" menonjol.

Sampel kod ini menyediakan kaedah yang mudah tetapi berkesan untuk menyerlahkan teks dalam halaman web. Anda boleh memperibadikan teks carian, warna serlahkan atau bahkan melanjutkan fungsi untuk menyerlahkan berbilang kejadian jika perlu.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Mencipta Kesan Serlahkan Teks Sekali dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!