Rumah >hujung hadapan web >tutorial js >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!