JavaScript正则替换文本时如何排除HTML标签属性内的匹配内容

核心要求 #

• 替换所有普通文本中出现的独立text字符串为xxxx
• 禁止替换HTML标签属性值中出现的text
• 场景限制：无法使用DOM解析，仅能通过正则表达式实现

现有错误实现 #

原有代码如下：

var str = '"text<div id="text">is text istext"text"</div> text '
var xxx = str.replace(/([\s.?,"';:!()\[\]{}<>\/])(text)([\s.?,"';:!()\[\]{}<>\/])/g, '$1xxxx$3');
console.log(xxx)

运行后得到错误输出：

"xxxx<div id="xxxx">is xxxx istext"xxxx"</div> xxxx 

问题：标签属性id="text"中的text被误替换。

预期正确结果 #

"xxxx<div id="text">is xxxx istext"xxxx"</div> xxxx 

即标签属性内的text完全保留，仅替换普通文本中符合边界规则的独立text。

可行正则方案 #

利用正则匹配优先级，先捕获所有HTML标签内容跳过替换，仅处理标签外的文本，实现代码如下：

var str = '"text<div id="text">is text istext"text"</div> text '
var xxx = str.replace(/<[^>]+>|(\btext\b)/g, function(match, textGroup) {
  // 匹配到HTML标签时直接返回原内容，不做替换
  if (match.startsWith('<')) return match;
  // 仅标签外捕获到的独立text执行替换
  return textGroup ? 'xxxx' : match;
});
console.log(xxx);

实现说明 #

• 正则优先匹配<[^>]+>规则，覆盖所有从<开头到>结尾的标签内容，这部分内容原样返回，从根本上避免标签内（包括属性值）的text被改动
• 次级匹配规则\btext\b用单词边界匹配独立的text，比枚举特殊分隔符的写法兼容性更强，不会误替换istext这类粘连的字符
• 运行上述代码可直接得到预期输出结果。

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