JavaScript怎麼實作html頁內搜尋

JavaScript實作html頁內搜尋

隨著網路的快速發展，網頁的數量也不斷增加。為了方便使用者快速找到需要的內容，有些網頁上加入了搜尋引擎。但是，有一些簡單的網頁並沒有這樣的功能。本篇文章將介紹如何使用JavaScript實作html頁內搜尋。

一、需求分析

我們需要實現的功能很簡單：在一個html頁面內輸入關鍵字，點擊搜尋按鈕後，高亮顯示包含關鍵字的文字。

二、實作過程

以下我們以一個簡單的html頁面為例，介紹如何實作頁內搜尋功能。

1. HTML頁面

我們的html頁面如下所示：

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. JavaScript實作

我們需要在頁面中加入JavaScript程式碼來實作搜尋功能。程式碼如下所示：

<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>

我們先取得搜尋框中的關鍵字，然後取得頁面中所有的p標籤。接著，我們遍歷所有的p標籤，取得每個p標籤中的文字內容並判斷文字內容是否包含關鍵字。如果包含關鍵字，我們將關鍵字高亮顯示。最後，將修改後的文字內容重新放回p標籤中。

三、測試結果

我們運行上述程式碼並輸入關鍵字“重要”，點擊搜尋按鈕後，頁面上包含關鍵字“重要”的文字將被高亮顯示。如下圖所示：

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

四、效能最佳化

#在實作了搜尋功能之後，我們還可以進行一些效能優化。

1. 執行效率最佳化

在搜尋文字時，我們使用了indexOf()函數判斷字串中是否包含關鍵字。但是，該函數的執行效率較低。因此，我們可以使用正規表示式來取代該函數。如下所示：

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

2. 可讀性最佳化

我們將搜尋函數放在了button的onclick事件中。這樣雖然可以實現搜尋功能，但是程式碼可讀性不好。我們可以將搜尋函數獨立出來，並綁定到form的submit事件上。當使用者按下回車鍵時，也可以觸發搜尋事件。程式碼如下：

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

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

五、總結

本文介紹如何使用JavaScript實作html頁內搜尋功能。雖然該功能簡單，但是在需要快速查找頁面中關鍵資訊時非常有用。我們可以透過程式碼優化來提高搜尋效率和可讀性。

以上是JavaScript怎麼實作html頁內搜尋的詳細內容。更多資訊請關注PHP中文網其他相關文章！