JS实现HTM搜索关键词高亮显示

灰太狼 2023-09-29 13:46 44阅读 0赞

> 如何利用JS实现HTML搜索关键词高亮显示呢？

**目录**

一、优化前的写法

二、优化后的方法

三、程序运行效果

--------------------

![393b8e311b7846c8bce077ca6a334b7d.png][]

## 一、优化前的写法 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS实现HTM搜索关键词高亮显示</title>
    </head>
    
    <body>
        <input type="text" id="searchInput" placeholder="请输入关键词">
        <button id="searchBtn">搜索</button>
        <div id="content">
            <p>JavaScript（简称“JS”）是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。</p>
            <p>JavaScript是一种基于原型、函数先行的语言，是一种解释型脚本语言，是一种动态类型语言，是一种弱类型语言，使用它可以为网页添加各式各样的动态效果，交互效果，以及实现各种功能。</p>
            <p>JavaScript是一种运行在客户端的脚本语言，主要用于网页交互、表单验证、页面动态效果等方面。</p>
        </div>
    
        <script>
            // 获取元素
            const searchInput = document.getElementById('searchInput');
            const searchBtn = document.getElementById('searchBtn');
            const content = document.getElementById('content');
    
            // 搜索关键词高亮显示
            function searchHighlight(keyword) {
                // 将原文本还原，去除高亮样式
                const regExp = new RegExp(`<span style="color:red;">(${keyword})</span>`, 'g');
                content.innerHTML = content.innerHTML.replace(regExp, '$1');
                // 匹配关键词，并添加高亮样式
                if (keyword !== '') {
                    const regExp = new RegExp(`(${keyword})`, 'g');
                    content.innerHTML = content.innerHTML.replace(regExp, '<span style="color:red;">$1</span>');
                }
            }
    
    
            // 搜索按钮点击事件
            searchBtn.addEventListener('click', function () {
                const keyword = searchInput.value.trim();
                searchHighlight(keyword);
            });
    
            // 输入框回车事件
            searchInput.addEventListener('keydown', function (event) {
                if (event.keyCode === 13) {
                    const keyword = searchInput.value.trim();
                    searchHighlight(keyword);
                }
            });
        </script>
    </body>
    
    </html>

> 这种写法，会存在一个问题，就是在我输入搜索关键词的时候，如果搜索关键词中包含+或者++的时候，这种写法就会导致高亮显示不成功。这是因为在正则表达式中，加号（+）和双加号（++）都有特殊含义，需要进行转义才能匹配。

![bc94f3c0cb5742d2bd2f939d2adf3558.png][]

## 二、优化后的方法 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS实现HTM搜索关键词高亮显示</title>
    </head>
    
    <body>
        <input type="text" id="searchInput" placeholder="请输入关键词">
        <button id="searchBtn">搜索</button>
        <div id="content">
            <p>JavaScript（简称“JS”）是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。</p>
            <p>JavaScript是一种基于原型、函数先行的语言，是一种解释型脚本语言，是一种动态类型语言，是一种弱类型语言，使用它可以为网页添加各式各样的动态效果，交互效果，以及实现各种功能。</p>
            <p>JavaScript是一种运行在客户端的脚本语言，主要用于网页交互、表单验证、页面动态效果等方面。</p>
        </div>
    
        <script>
            // 获取元素
            const searchInput = document.getElementById('searchInput');
            const searchBtn = document.getElementById('searchBtn');
            const content = document.getElementById('content');
    
            // 搜索关键词高亮显示
            function searchHighlight(keyword) {
                // 将原文本还原，去除高亮样式
                const regExp = new RegExp(`<span style="color:red;">(${keyword.replace(/[+]/g, '\\$&')})</span>`, 'g');
                content.innerHTML = content.innerHTML.replace(regExp, '$1');
                // 匹配关键词，并添加高亮样式
                if (keyword !== '') {
                    const regExp = new RegExp(`(${keyword.replace(/[+]/g, '\\$&')})`, 'g');
                    content.innerHTML = content.innerHTML.replace(regExp, '<span style="color:red;">$1</span>');
                }
            }
    
    
            // 搜索按钮点击事件
            searchBtn.addEventListener('click', function () {
                const keyword = searchInput.value.trim();
                searchHighlight(keyword);
            });
    
            // 输入框回车事件
            searchInput.addEventListener('keydown', function (event) {
                if (event.keyCode === 13) {
                    const keyword = searchInput.value.trim();
                    searchHighlight(keyword);
                }
            });
        </script>
    </body>
    
    </html>

## 三、程序运行效果 ##

![5aefcad58268488cac443505b5d41489.png][]

> 可以看到，我们优化之后的方法，就可以解决这个问题。

![25e31fdc419d463ba2d36450d09a8731.png][]

[393b8e311b7846c8bce077ca6a334b7d.png]: https://img-blog.csdnimg.cn/393b8e311b7846c8bce077ca6a334b7d.png
[bc94f3c0cb5742d2bd2f939d2adf3558.png]: https://img-blog.csdnimg.cn/bc94f3c0cb5742d2bd2f939d2adf3558.png
[5aefcad58268488cac443505b5d41489.png]: https://img-blog.csdnimg.cn/5aefcad58268488cac443505b5d41489.png
[25e31fdc419d463ba2d36450d09a8731.png]: https://img-blog.csdnimg.cn/25e31fdc419d463ba2d36450d09a8731.png