js高亮显示搜索结果

基础概念

JavaScript 高亮显示搜索结果是指在网页上将用户搜索的关键词以特定的样式（如加粗、改变颜色等）标记出来，以便用户能够快速识别出搜索结果中的相关部分。

类型

简单文本替换：直接将关键词替换为带有样式的 HTML 元素。
正则表达式匹配：使用正则表达式来查找和替换文本中的关键词。
第三方库：如 highlight.js 或 Prism.js，这些库提供了更复杂的高亮功能，支持多种编程语言的语法高亮。

应用场景

搜索引擎结果页面（SERP）：在搜索结果中高亮显示用户查询的关键词。
文档管理系统：在文档预览中突出显示搜索关键词。
论坛和评论系统：在用户评论中高亮显示敏感词或关键词。

示例代码

以下是一个简单的 JavaScript 函数，用于高亮显示文本中的关键词：

function highlightKeywords(text, keywords) {
    let highlightedText = text;
    keywords.forEach(keyword => {
        const regex = new RegExp(`(${keyword})`, 'gi');
        highlightedText = highlightedText.replace(regex, '<span class="highlight">$1</span>');
    });
    return highlightedText;
}

// 使用示例
const searchText = "这是一个示例文本，用于演示高亮显示功能。";
const searchKeywords = ["示例", "高亮"];
const result = highlightKeywords(searchText, searchKeywords);

document.getElementById('result').innerHTML = result;

在 CSS 中定义 .highlight 类：

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

可能遇到的问题及解决方法

关键词中包含特殊字符：特殊字符可能会干扰正则表达式的匹配。解决方法是在构建正则表达式时对这些字符进行转义。

function escapeRegExp(string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}

const escapedKeyword = escapeRegExp(keyword);