Bagaimana untuk melaksanakan penonjolan teks dalam jQuery?

jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan manipulasi dan pengendalian acara dokumen HTML. Apabila melaksanakan fungsi penonjolan teks, anda boleh menggunakan jQuery melalui langkah berikut:

1. Perkenalkan fail perpustakaan jQuery:
   Pertama, anda perlu memperkenalkan fail perpustakaan jQuery ke dalam fail HTML, yang boleh ditambah melalui pautan CDN atau fail tempatan. Tambahkan coretan kod berikut dalam teg :

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

2. Menulis struktur HTML:
   Tambahkan kotak teks atau elemen HTML lain pada halaman untuk memasukkan kandungan teks yang perlu diserlahkan. Contoh kod adalah seperti berikut:

<input type="text" id="searchInput" placeholder="输入需要高亮显示的文本">
<button id="highlightBtn">高亮显示</button>
<div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula metus ac odio.
</div>

3. Tulis kod jQuery:
   Seterusnya, tulis kod melalui jQuery untuk melaksanakan fungsi penyerlahan teks. Contoh kod adalah seperti berikut:

$(document).ready(function() {
    $("#highlightBtn").click(function() {
        var searchString = $("#searchInput").val();
        var content = $("#content").text();
        
        var highlightedContent = content.replace(new RegExp(searchString, 'gi'), function(match) {
            return '<span class="highlighted">' + match + '</span>';
        });
        
        $("#content").html(highlightedContent);
    });
});

Dalam kod di atas, mula-mula dapatkan teks carian dalam kotak input dan teks dalam kawasan kandungan. Kemudian gunakan kaedah ganti JavaScript yang digabungkan dengan ungkapan biasa untuk menambah teg Akhir sekali, kandungan yang diproses ditetapkan semula ke kawasan kandungan.

4. Tetapan gaya CSS:
   Untuk menjadikan kesan penyerlahan lebih baik, anda juga perlu menetapkan gaya teks yang diserlahkan dalam fail CSS. Contoh kod adalah seperti berikut:

.highlighted {
    background-color: yellow;
    font-weight: bold;
}

Melalui langkah di atas, anda boleh melaksanakan fungsi penyerlahan teks pada halaman. Selepas pengguna memasukkan teks yang perlu diserlahkan, klik butang untuk menyerlahkan kandungan teks yang sepadan. Kekuatan dan kemudahan jQuery menjadikannya mudah dan cekap untuk melaksanakan penonjolan teks.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan penonjolan teks dalam jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!