Bagaimana untuk melaksanakan carian dalam halaman html dengan JavaScript

JavaScript melaksanakan carian dalam halaman html

Dengan perkembangan pesat Internet, bilangan halaman web juga semakin meningkat. Untuk memudahkan pengguna mencari kandungan yang mereka perlukan dengan cepat, enjin carian telah ditambahkan pada beberapa halaman web. Walau bagaimanapun, terdapat beberapa halaman web ringkas yang tidak mempunyai fungsi sedemikian. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan carian dalam halaman html.

1. Analisis Keperluan

Fungsi yang perlu kami laksanakan adalah sangat mudah: masukkan kata kunci dalam halaman html, klik butang carian dan serlahkan teks yang mengandungi kata kunci.

2. Proses pelaksanaan

Di bawah ini kami mengambil halaman html ringkas sebagai contoh untuk memperkenalkan cara melaksanakan fungsi carian pada halaman.

1. Halaman HTML

Halaman html kami kelihatan seperti ini:

nbsp;html>


    <title>JavaScript实现页内搜索</title>


    <h1 id="这是一个标题">这是一个标题</h1>
    <p>这是一段文字，其中包含了<span>重要信息</span>和其他无关信息。</p>
    <p>这是另一段文字，其中也包含了<span>重要信息</span>和其他无关信息。而且有一些<span>重要信息</span>是重复的。</p>
    <p>这是最后一段文字，没有任何<span>重要信息</span>。</p>
    <input>
    <button>搜索</button>

2. Pelaksanaan JavaScript

Kami perlu menambah kod JavaScript pada halaman untuk melaksanakan fungsi carian. Kodnya adalah seperti berikut:

<script>
function searchWord() {
    // 获取搜索框中的关键字
    var keyword = document.getElementById(&#39;keyword&#39;).value;
    // 获取所有的p标签
    var pTags = document.getElementsByTagName(&#39;p&#39;);
    // 遍历所有p标签
    for (var i = 0; i < pTags.length; i++) {
        // 获取当前p标签中的文本内容
        var text = pTags[i].innerText;
        // 判断文本内容中是否包含关键字
        if (text.indexOf(keyword) !== -1) {
            // 如果包含关键字，将关键字高亮显示
            var html = text.replace(new RegExp(keyword, &#39;g&#39;), &#39;<span style="background-color: yellow;">&#39; + keyword + &#39;&#39;);
            pTags[i].innerHTML = html;
        }
    }
}
</script>

Kami mula-mula mendapatkan kata kunci dalam kotak carian, dan kemudian mendapatkan semua teg p dalam halaman. Seterusnya, kami merentasi semua tag p, dapatkan kandungan teks dalam setiap tag p dan tentukan sama ada kandungan teks mengandungi kata kunci. Jika kata kunci disertakan, kami menyerlahkan kata kunci tersebut. Akhir sekali, masukkan semula kandungan teks yang diubah suai ke dalam tag p.

3. Keputusan ujian

Kami menjalankan kod di atas dan memasukkan kata kunci "penting". Seperti yang ditunjukkan dalam rajah di bawah:

[](https://postimg.cc/PNwqW7qQ)

4. Pengoptimuman Prestasi

Selepas melaksanakan fungsi carian , Kami juga boleh melakukan beberapa pengoptimuman prestasi.

1. Pengoptimuman kecekapan pelaksanaan

Apabila mencari teks, kami menggunakan fungsi indexOf() untuk menentukan sama ada rentetan mengandungi kata kunci. Walau bagaimanapun, fungsi ini berfungsi dengan kurang cekap. Oleh itu, kita boleh menggunakan ungkapan biasa dan bukannya fungsi ini. Seperti yang ditunjukkan di bawah:

if (text.match(new RegExp(keyword, 'gi'))) {
    // ...
}

2. Pengoptimuman kebolehbacaan

Kami meletakkan fungsi carian dalam acara onclick pada butang. Walaupun fungsi carian boleh dilaksanakan dengan cara ini, kebolehbacaan kod adalah tidak baik. Kita boleh memisahkan fungsi carian dan mengikatnya pada acara penyerahan borang. Acara carian juga boleh dicetuskan apabila pengguna menekan kekunci Enter. Kodnya adalah seperti berikut:

<script>
function searchWord() {
    // ...
}

document.querySelector(&#39;form&#39;).addEventListener(&#39;submit&#39;, function (event) {
    event.preventDefault();
    searchWord();
});
</script>

5. Ringkasan

Artikel ini memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi carian dalam halaman html. Walaupun ciri ini mudah, ia sangat berguna apabila anda perlu mencari maklumat penting pada halaman dengan cepat. Kami boleh meningkatkan kecekapan carian dan kebolehbacaan melalui pengoptimuman kod.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan carian dalam halaman html dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!