JavaScript如何用正则过滤HTML标签匹配单词且不修改标签属性

你现在正则误改标签属性的核心原因很简单：直接对完整HTML字符串做替换时，没有区分「尖括号包裹的标签/属性/注释内容」和「页面可见的文本内容」，正则会无差别扫描所有字符串片段，自然会命中id="text"这类属性里的关键词。

你想跳过所有<>包裹内容的思路完全可行，根本不需要写复杂的TreeWalker遍历逻辑，只要调整正则匹配顺序就行：匹配时优先捕获所有标签段（尖括号包裹的所有内容，包括注释、标签属性、script/style块），这部分内容直接原样返回不做任何处理；仅对捕获到的非标签文本段做单词包裹替换。

实现注意点 #

• 不要逐个单词循环替换，先把所有待匹配单词整合成一个正则统一替换，既可以避免重复替换已经被span包裹的内容，也能提升执行效率
• 单词匹配用单词边界\b做限制，避免把长单词里的片段误拆分匹配（比如不要把testis里的is单独拎出来加标签）
• 正则全局匹配时，优先匹配标签段，再匹配普通文本段，替换时判断捕获内容类型：标签段原封不动返回，文本段做关键词替换

修正后可直接运行的代码 #

<!DOCTYPE html>
<html>
<head>
<style>span{background:#ccc;}</style>
<script>
function add_span(word_array, html_str) {
    // 转义单词里的正则特殊字符，拼接成统一的单词匹配正则，加单词边界避免误匹配长词
    const escapedWords = word_array.map(word => word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
    const wordMatchReg = new RegExp(`\\b(${escapedWords.join('|')})\\b`, 'g');
    // 核心正则：按优先级匹配 脚本块/样式块/普通标签注释/普通文本
    const htmlParseReg = /<script[\s\S]*?<\/script>|<style[\s\S]*?<\/style>|<[^>]+>|[^<]+/g;
    
    return html_str.replace(htmlParseReg, matchSegment => {
        // 标签、脚本、样式、注释内容直接原样返回，不做替换
        if (matchSegment.startsWith('<')) return matchSegment;
        // 纯文本内容里的关键词包裹span
        return matchSegment.replace(wordMatchReg, '<span>$1</span>');
    });
}

window.onload = function(){
  const word_array = ['is', 'test', 'testis', 'istest', 'text']
  document.body.innerHTML = add_span(word_array, document.body.innerHTML);
}
</script>
</head>
<body>
<div id="text"><!--注释内容、id属性里的text都不会被误替换-->
is test testis istest,
is[test]testis{istest}testis(istest)testis istest
</div>
</body>
</html>

之前加的(^<.*>)规则无效的原因 #

这个写法有两个致命问题：

1. ^是匹配整个字符串的开头位置，只能匹配HTML串最开头的第一个标签，完全没法匹配HTML中间穿插的所有标签
2. .*是贪婪匹配模式，会从第一个<直接匹配到整个字符串最后一个>，把中间所有的标签、文本全部吞掉，根本没法正常匹配内容

边界场景适配 #

如果你的页面里存在带<符号的普通文本（比如1<2这种），可以在匹配到文本段后先单独处理这类尖括号，不会影响标签识别逻辑，绝大多数常规业务场景下上面的代码已经可以直接使用。

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