如何通过正则表达式为HTML链接标签内的文本包裹span标签？

问题场景 #

我有一段用于HTML邮件的链接字符串，示例输入如下：

<a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">Twitter/</a>

需要将链接内的文本（如示例中的Twitter）包裹上带样式的<span>元素，最终输出效果如下：

<a href="https://twitter.com/" target="_blank" rel="noopener noreferrer"><span style="color: white">Twitter</span>/</a>

注：该字符串将从MongoDB取出后通过Node.js发送为邮件内容，无需操作DOM。

解决方案 #

正则表达式与替换规则 #

使用以下正则匹配并替换：

• 匹配正则：

(<a\s+[^>]+>)([^<]+?)(?=\/<\/a>)

• 替换模板：

$1<span style="color: white">$2</span>

正则逻辑说明 #

1. (<a\s+[^>]+>)：捕获完整的<a>标签开头（包含所有属性），对应替换模板中的$1
2. ([^<]+?)：非贪婪匹配<a>标签内的纯文本内容（即需要包裹span的部分），对应替换模板中的$2
3. (?=\/<\/a>)：正向预查，确保匹配的文本后紧跟/</a>，精准定位目标文本范围

Node.js代码示例 #

const originalHtml = '<a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">Twitter/</a>';
const regex = /(<a\s+[^>]+>)([^<]+?)(?=\/<\/a>)/;
const modifiedHtml = originalHtml.replace(regex, '$1<span style="color: white">$2</span>');
console.log(modifiedHtml);

适配调整 #

如果链接文本后没有/（即格式为<a>文本</a>），只需将正则的正向预查部分改为(?=<\/a>)即可。

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