How to implement html in-page search with JavaScript

JavaScript implements html in-page search

With the rapid development of the Internet, the number of web pages is also growing. In order to facilitate users to quickly find the content they need, search engines have been added to some web pages. However, some simple web pages do not have such functionality. This article will introduce how to use JavaScript to implement html in-page search.

1. Requirements Analysis

The function we need to implement is very simple: enter keywords in an HTML page, click the search button, and highlight the text containing the keywords.

2. Implementation process

Let’s take a simple HTML page as an example to introduce how to implement the on-page search function.

1. HTML page

Our html page looks like this:

nbsp;html>


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


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

2. JavaScript implementation

us JavaScript code needs to be added to the page to implement the search function. The code is as follows:

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

We first get the keywords in the search box, and then get all the p tags in the page. Next, we traverse all p tags, obtain the text content in each p tag and determine whether the text content contains keywords. If a keyword is included, we highlight the keyword. Finally, put the modified text content back into the p tag.

3. Test results

We run the above code and enter the keyword "Important". After clicking the search button, the text containing the keyword "Important" will be highlighted on the page. As shown in the figure below:

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

4. Performance Optimization

After implementing the search function, We can also do some performance optimizations.

1. Execution efficiency optimization

When searching for text, we use the indexOf() function to determine whether the string contains keywords. However, this function performs less efficiently. Therefore, we can use regular expressions instead of this function. As shown below:

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

2. Readability optimization

We placed the search function in the onclick event of the button. Although the search function can be implemented in this way, the readability of the code is not good. We can separate the search function and bind it to the submit event of the form. The search event can also be triggered when the user presses the Enter key. The code is as follows:

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

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

5. Summary

This article introduces how to use JavaScript to implement the html in-page search function. Although this feature is simple, it is very useful when you need to quickly find key information on a page. We can improve search efficiency and readability through code optimization.

The above is the detailed content of How to implement html in-page search with JavaScript. For more information, please follow other related articles on the PHP Chinese website!