使用JavaScript实现关键词高亮显示，js搜索关键字高亮

欧气 2025年03月20日 06:55 1 0

在Web开发中,文本搜索和关键词高亮显示是常见的功能需求，通过JavaScript可以实现动态的关键词高亮效果，使搜索结果更加突出和直观，本文将详细介绍如何使用JavaScript来实现这一功能。

实现步骤

准备HTML结构

我们需要准备一个包含待搜索内容的HTML元素。

使用JavaScript实现关键词高亮显示，js搜索关键字高亮

图片来源于网络，如有侵权联系删除

<div id="content">
    这是一段测试文本，其中包含了几个关键词：JavaScript、前端开发、Web技术等。
</div>

JavaScript代码实现

我们将编写JavaScript代码来处理关键词搜索和高亮显示的逻辑。

a. 定义关键词列表

我们定义一个数组来存储所有需要搜索的关键词：

const keywords = ['JavaScript', '前端开发', 'Web技术'];

b. 搜索函数

创建一个函数highlightKeywords，它接受两个参数：要搜索的文本和一个关键词数组，该函数会遍历关键词数组，并在原始文本中找到这些关键词的位置，然后进行替换以实现高亮显示。

function highlightKeywords(text, keywordList) {
    let resultText = text;
    for (let i = 0; i < keywordList.length; i++) {
        const keyword = keywordList[i];
        const regex = new RegExp(keyword, 'gi'); // 使用全局（g）和多字节字符匹配（i）
        resultText = resultText.replace(regex, `<span class="highlight">${keyword}</span>`);
    }
    return resultText;
}

c. 高亮样式

为了使高亮的文本更明显,我们可以添加一些CSS样式到我们的页面中：

.highlight {
    background-color: yellow;
    font-weight: bold;
}

d. 调用函数并更新DOM

我们需要调用这个函数并将结果显示在页面上,假设有一个输入框用于接收用户的查询，以及一个按钮触发搜索操作：

使用JavaScript实现关键词高亮显示，js搜索关键字高亮

图片来源于网络，如有侵权联系删除

<input type="text" id="searchInput" placeholder="请输入关键词...">
<button onclick="performSearch()">搜索</button>
<div id="result"></div>
<script>
// ...之前的JavaScript代码...
function performSearch() {
    const searchInput = document.getElementById('searchInput').value.trim();
    if (!searchInput) {
        alert('请输入关键词！');
        return;
    }
    const contentElement = document.getElementById('content');
    const originalText = contentElement.innerHTML;
    const highlightedText = highlightKeywords(originalText, [searchInput]);
    document.getElementById('result').innerHTML = highlightedText;
}
</script>