编写正则表达式为$分隔符与HTML标签外的单词添加span标签

要实现你要的效果，核心思路是优先匹配所有需要忽略的区域，直接保留原内容；只对不在这些区域内的单词进行替换。正则本身没有直接的“非”运算符，但可以通过分支匹配的优先级来实现这个逻辑——先把所有要跳过的内容匹配出来，剩下的就是需要处理的目标单词。

具体实现步骤：

• 先定义需要跳过的三种模式，按优先级排序（先匹配更长的$$...$$，避免和$...$冲突）：
  1. \$\$[\s\S]*?\$\$：匹配MathJax的块级公式（$$...$$），[\s\S]用来匹配跨行内容
  2. \$[^$]*?\$：匹配MathJax的行内公式（$...$），[^$]确保不会误匹配$$的情况
  3. <[^>]+>：匹配HTML标签，[^>]确保匹配到标签闭合的>为止
• 最后定义需要替换的单词模式：[A-Za-z0-9.]+

用正则分支|把这些模式组合，再通过replace的回调函数判断匹配类型：如果是前三种跳过项，直接返回原内容；如果是单词，就替换成目标<span>标签。

代码示例（JavaScript） #

const content = `这里是测试内容：<p>HTML标签内的单词不替换</p>，行内公式$E=mc^2$里的单词不替换，块级公式$$
\sum_{i=1}^n i = \frac{n(n+1)}{2}
$$里的也不替换，只有正常的Word123.abc这类单词会被替换。`;

const regex = /\$\$[\s\S]*?\$\$|\$[^$]*?\$|<[^>]+>|([A-Za-z0-9.]+)/g;

const result = content.replace(regex, (match, word) => {
  // 如果捕获到了单词（即匹配的是最后一个分支）
  if (word) {
    return `<span class='invisible'>${word}</span>`;
  }
  // 否则是需要忽略的内容，直接返回原匹配
  return match;
});

console.log(result);

关键说明 #

• 分支顺序很重要：必须先匹配$$...$$再匹配$...$，否则$$会被拆成两个单独的$匹配，导致块级公式被错误处理。
• 用[\s\S]*?处理块级公式的跨行情况，因为.默认不匹配换行符，[\s\S]等价于匹配所有字符（包括换行）。
• 捕获组([A-Za-z0-9.]+)用来标记需要替换的单词，在回调里通过判断捕获组是否有值来决定替换逻辑。

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