Bagaimanakah Saya Boleh Menyerlahkan Satu Contoh Teks dalam JavaScript?

Serlahkan Teks dengan JavaScript

Menyerlahkan teks khusus pada halaman web boleh meningkatkan pengalaman pengguna dan menarik perhatian kepada kandungan penting. Demonstrasi ini memfokuskan pada penyerlahan satu kejadian, tidak seperti kesan serlahan biasa yang mengenal pasti semua tika teks, yang biasa digunakan dalam kefungsian carian.

Kesan Serlahan jQuery

Untuk penyelesaian yang cepat dan mudah, kesan sorotan jQuery boleh bekerja:

$(selector).highlight(text, options);

Cuma nyatakan teks dan serlahkan pilihan untuk mencapai hasil yang anda inginkan.

Kod JavaScript Tersuai

Jika anda lebih suka yang mentah Pendekatan JavaScript, pertimbangkan coretan kod ini:

function highlight(text) {
  // Get the target element
  var inputText = document.getElementById("inputText");

  // Extract the element's HTML content
  var innerHTML = inputText.innerHTML;

  // Locate the first occurrence of the text
  var index = innerHTML.indexOf(text);

  // Check if text is found
  if (index >= 0) { 
    // Inject highlight markup around the matching text
    innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>"
                + innerHTML.substring(index, index + text.length) + "</span>"
                + innerHTML.substring(index + text.length);

    // Update the element with highlighted text
    inputText.innerHTML = innerHTML;
  }
}

Jangan lupa untuk menambah CSS yang sepadan gaya untuk kelas 'highlight':

.highlight {
  background-color: yellow;
}

Contoh Penggunaan

Untuk menyerlahkan perkataan "musang" dalam elemen div tertentu, hanya gunakan fungsi highlight:

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

<div>

Mengklik butang akan menyerlahkan kejadian pertama "musang" dalam warna kuning.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyerlahkan Satu Contoh Teks dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!