JS使用replaceAll替换URL为a标签时如何忽略已有a标签内的内容

要解决URL重复匹配、误匹配a标签内容的问题，仅需做两个核心调整：

• 先对URL数组按长度降序排序，优先替换更长的URL，避免短URL提前匹配长URL中的片段
• 调整匹配规则，过滤所有已经被a标签包裹的内容

方案1：正则过滤法（实现简洁） #

先对URL中的正则特殊字符做转义，再用负向断言限制匹配范围，避免命中a标签内部内容，完整实现代码如下：

// 转义URL中的正则特殊字符，避免匹配逻辑异常
function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

// 原始待处理字符串
let content = "Check it out at www.stack.com/abc and bookmark the www.stack.com, www.overflow.com";
// 待匹配的URL数组
const urlList = ["www.stack.com/abc", "www.stack.com", "www.overflow.com"];

// 第一步：按URL长度降序排序，优先替换长URL
urlList.sort((a, b) => b.length - a.length);

urlList.forEach(url => {
  const escapedUrl = escapeRegExp(url);
  // 替换规则：仅匹配不在a标签内的URL
  content = content.replaceAll(
    new RegExp(`(?<!<a[^>]*>)${escapedUrl}(?![^<]*</a>)`, 'gi'),
    `<a href="${url}" target="_blank">${url}</a>`
  );
});

console.log(content);

正则规则说明：

• (?<!<a[^>]*>) 负向回顾断言：确保匹配到的URL前方没有a标签的起始标记，不会命中a标签属性中的URL
• (?![^<]*</a>) 负向先行断言：确保匹配到的URL后方不会跟随a标签的结束标记，不会命中a标签包裹的展示内容

方案2：占位符替换法（兼容性更强） #

如果运行环境不支持ES2018新增的负向回顾语法，可以用占位符方案，逻辑更稳妥，不会出现正则兼容性问题：

let content = "Check it out at www.stack.com/abc and bookmark the www.stack.com, www.overflow.com";
const urlList = ["www.stack.com/abc", "www.stack.com", "www.overflow.com"];
const aTagMap = new Map();
let placeholderId = 0;

// 第一步：把已有的a标签替换为唯一占位符存储
content = content.replace(/<a[^>]*>.*?<\/a>/gi, match => {
  const placeholder = `__A_TAG_${placeholderId}__`;
  aTagMap.set(placeholder, match);
  placeholderId++;
  return placeholder;
});

// 第二步：排序URL后做替换，此时不存在a标签不会误匹配
urlList.sort((a, b) => b.length - a.length);
urlList.forEach(url => {
  content = content.replaceAll(url, `<a href="${url}" target="_blank">${url}</a>`);
});

// 第三步：把占位符换回原来的a标签
aTagMap.forEach((originalTag, placeholder) => {
  content = content.replaceAll(placeholder, originalTag);
});

console.log(content);

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