JavaScript含特殊字符内容高亮失效问题求助

原代码的核心缺陷：

• 仅按空格拆分内容，完全忽略括号、反斜杠等特殊字符作为分隔的场景
• 匹配逻辑仅针对带连字符的单词，无法覆盖其他特殊字符包裹关键词的情况
• 手动逐字符匹配的方式容错性极低，无法处理复杂文本结构

采用正则全局匹配方案，先转义搜索词中的正则特殊字符，避免语法冲突，同时保留原文大小写与所有特殊字符，实现精准高亮。

修改后的代码 #

highlight: function (value) {
    try {
        if (!value) return value;
        
        const searchTerm = RRS.Search.Query.Value.trim();
        if (!searchTerm) return value;

        // 转义正则特殊字符：^ $ . * + ? ( ) [ ] { } | \
        const escapedTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        // 创建不区分大小写的全局匹配正则
        const highlightRegex = new RegExp(escapedTerm, 'gi');

        // 替换匹配内容为高亮标签，保留原文本的大小写与特殊字符
        return value.replace(highlightRegex, matched => 
            `<span class="rrsHighlight">${matched}</span>`
        );
    } catch (e) {
        edmscPage.HideWaitScreenDialog();
        alert("Report->Highlight\n" + e.message);
    }
}

关键细节说明 #

• 特殊字符转义：escapedTerm处理搜索词中的正则保留字符，确保这些字符被当作普通文本匹配，不会触发正则语法逻辑
• 全局不区分大小写匹配：正则的g标志实现全文匹配所有关键词，i标志实现大小写不敏感匹配
• 保留原文格式：replace回调直接使用匹配到的原文本，不会修改原文的大小写或丢失特殊字符
• 边界处理：提前判断空值与空搜索词，避免无效运算

可选扩展：完整单词匹配 #

如果需要避免部分匹配（比如搜索"cat"时不高亮"category"），可使用环视断言实现精准单词匹配：

// 用环视断言替代单词边界（避免特殊字符导致\b失效）
const highlightRegex = new RegExp(`(?<!\\w)${escapedTerm}(?!\\w)`, 'gi');

内容的提问来源于stack exchange，提问作者Schmit