如何编写正则表达式替换文本时跳过{% %}包裹的内容

核心思路：利用正则「优先匹配更长规则」的特性，同时匹配两种模式：完整的{% ... %}模板标签、目标替换字符串。在替换回调中仅对非模板标签的匹配结果执行替换即可。

如果搜索关键词是动态传入的，建议先做正则特殊字符转义，避免触发正则语法错误：

// 正则特殊字符转义函数
function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

核心替换逻辑如下：

const v = 'header';
const escapedV = escapeRegExp(v);
// 正则同时匹配 {%...%} 标签 和 目标字符串
const re = new RegExp(`({%[^%]*%})|${escapedV}`, 'gi');
fileStr = fileStr.replace(re, (match, templateTag) => {
  // 匹配到模板标签直接原样返回，不做替换
  if (templateTag) return templateTag;
  // 匹配到目标字符串则替换为指定内容
  return '{% test %}';
});

实现逻辑说明 #

• 正则中用|分隔两个匹配规则，JS正则会优先匹配排在前面、长度更长的规则，因此{% ... %}标签会被优先完整捕获，不会被拆分成单独的字符串匹配
• 替换回调的第二个参数对应正则第一个分组的匹配结果，只有匹配到模板标签时才会有值
• [^%]*限定了模板标签的匹配范围，不会跨标签误匹配，相比非贪婪匹配性能更优

执行上述代码后即可得到预期结果：

<!DOCTYPE html>
<html lang="en" class="no-js">
...

<body>
  This is my {% test %}!
  {% include "header.tpl.html"%}
</body>

</html>

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