Bagaimanakah Saya Boleh Menyerlahkan Kejadian Teks Tertentu pada Halaman Web Menggunakan JavaScript?

Serlahkan Teks dengan JavaScript

Bagaimanakah anda boleh menyerlahkan teks secara selektif pada halaman web menggunakan JavaScript? Pusingan di sini adalah untuk menyerlahkan kejadian tertentu teks, bukannya setiap kejadian seperti dengan fungsi carian standard.

JavaScript Solution

Kesan sorotan jQuery adalah sesuai pilihan untuk menyerlahkan teks. Walau bagaimanapun, untuk penyelesaian JavaScript asli, pertimbangkan 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 melengkapkan pelaksanaan, anda memerlukan peraturan CSS berikut:

.highlight {
  background-color: yellow;
}

Penggunaan

Buat fail HTML, tampal kod dan masukkan teks input medan:

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

<div>

Klik "Serlahkan" untuk menyerlahkan kejadian pertama "musang" dalam warna kuning.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyerlahkan Kejadian Teks Tertentu pada Halaman Web Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!