搜索高亮显示

创作时间:

作者:

@小白创作中心

搜索高亮显示

引用

来源

https://docs.pingcode.com/baike/3621526

在网页开发中，搜索高亮显示是一个常见的功能需求。本文将详细介绍如何使用JavaScript实现表单搜索高亮显示，包括获取用户输入的搜索关键字、在目标文本中查找匹配项、用高亮样式包裹匹配项、处理边界情况以及优化用户体验。

在JavaScript中实现表单搜索高亮显示，可以通过以下几种方法：使用正则表达式、通过DOM操作遍历文本节点、结合CSS样式进行高亮显示。下面将详细介绍如何使用正则表达式来实现这一功能。

在实现搜索高亮显示时，核心步骤包括：获取用户输入的搜索关键字、在目标文本中查找匹配项、用高亮样式包裹匹配项。以下是详细的实现步骤。

一、获取用户输入的搜索关键字

首先，需要在HTML表单中设置一个输入框供用户输入搜索关键字，并添加一个按钮来触发搜索操作。下面是一个简单的HTML结构：

<!DOCTYPE html>
<html>
<head>
    <title>搜索高亮显示</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <input type="text" id="searchInput" placeholder="输入搜索关键字">
    <button onclick="highlightText()">搜索</button>
    <div id="content">
        <p>这是一个测试段落，用于展示如何在文本中实现搜索高亮显示。</p>
        <p>用户可以输入任意关键字进行搜索，匹配的文本会被高亮显示。</p>
    </div>
    <script src="highlight.js"></script>
</body>
</html>

在这个HTML结构中，input元素用于用户输入搜索关键字，button元素用于触发搜索操作，div元素包含要进行搜索的文本内容。

二、在目标文本中查找匹配项

接下来，使用JavaScript获取用户输入的搜索关键字，并在目标文本中查找匹配项。以下是一个简单的JavaScript函数来实现这一功能：

function highlightText() {
    // 获取用户输入的搜索关键字
    var searchKeyword = document.getElementById("searchInput").value;
    // 获取目标文本内容
    var content = document.getElementById("content").innerHTML;
    // 创建一个正则表达式，忽略大小写
    var regex = new RegExp('(' + searchKeyword + ')', 'gi');
    // 用高亮样式包裹匹配项
    var highlightedContent = content.replace(regex, '<span class="highlight">$1</span>');
    // 更新目标文本内容
    document.getElementById("content").innerHTML = highlightedContent;
}

在这个函数中，首先通过document.getElementById方法获取用户输入的搜索关键字和目标文本内容，然后使用正则表达式查找匹配项，并用<span>元素包裹匹配项，最后更新目标文本内容。

三、结合CSS样式进行高亮显示

为了实现高亮显示，需要在CSS样式中定义高亮样式。上面的HTML结构中已经包含了一个简单的高亮样式：

.highlight {
    background-color: yellow;
}

这个高亮样式会将背景颜色设置为黄色，从而实现高亮显示的效果。

四、处理边界情况

在实际应用中，还需要处理一些边界情况，例如：搜索关键字为空、没有匹配项、重复搜索等。以下是改进后的JavaScript函数，包含了对边界情况的处理：

function highlightText() {
    // 获取用户输入的搜索关键字
    var searchKeyword = document.getElementById("searchInput").value;
    // 如果搜索关键字为空，直接返回
    if (!searchKeyword) {
        return;
    }
    // 获取目标文本内容
    var content = document.getElementById("content").innerHTML;
    // 清除之前的高亮
    var cleanContent = content.replace(/<span class="highlight">(.*?)</span>/g, '$1');
    // 创建一个正则表达式，忽略大小写
    var regex = new RegExp('(' + searchKeyword + ')', 'gi');
    // 用高亮样式包裹匹配项
    var highlightedContent = cleanContent.replace(regex, '<span class="highlight">$1</span>');
    // 更新目标文本内容
    document.getElementById("content").innerHTML = highlightedContent;
}

在这个改进后的函数中，首先检查搜索关键字是否为空，如果为空则直接返回。然后清除之前的高亮样式，避免重复搜索时出现问题。最后执行高亮显示操作。

五、优化用户体验

为了进一步优化用户体验，可以考虑以下几点：

实时搜索：在用户输入时实时更新高亮显示，而不是等待用户点击搜索按钮。可以使用input事件监听用户输入：

document.getElementById("searchInput").addEventListener("input", highlightText);

清除搜索：添加一个清除按钮，允许用户清除搜索关键字并恢复原始文本内容：

<button onclick="clearSearch()">清除搜索</button>

function clearSearch() {
    // 清空搜索输入框
    document.getElementById("searchInput").value = "";
    // 获取目标文本内容
    var content = document.getElementById("content").innerHTML;
    // 清除高亮样式
    var cleanContent = content.replace(/<span class="highlight">(.*?)</span>/g, '$1');
    // 更新目标文本内容
    document.getElementById("content").innerHTML = cleanContent;
}

通过这些优化措施，可以提高搜索高亮显示功能的用户体验，使其更加友好和易用。