如何批量替换字符串中[]包裹内容为HTML链接？现有代码仅替换首个

你的代码只能处理第一个链接，问题出在这两点：

• text.indexOf("[")和text.indexOf("]")只会定位第一个方括号的位置，只能提取第一个链接的内容
• replace()方法默认只替换第一个匹配项，剩下的链接根本没被处理

要一次性替换所有[链接文本|网址]格式的内容，用正则表达式全局匹配是最直接的方案：

完整解决方案代码 #

const text = "Lorem ipsum dolor sit amet, [Link 1|www.example1.com] sadipscing elitr, sed diam nonumy [Link 2|www.example2.com] tempor invidunt ut labore et [Link 3|www.example3.com] magna";

// 全局匹配所有 [文本|网址] 格式的内容并替换
const newText = text.replace(/\[([^\|]+)\|([^\]]+)\]/g, (match, linkText, url) => {
  return `<a href="${url}" target="_blank">${linkText}</a>`;
});

console.log(newText);

代码说明 #

• 正则表达式/\[([^\|]+)\|([^\]]+)\]/g：
  • \[ 和 \]：匹配左右方括号（方括号是正则特殊字符，需要转义）
  • ([^\|]+)：捕获第一个分组，匹配所有**不是|**的字符，也就是链接显示文本
  • \|：匹配分隔符|
  • ([^\]]+)：捕获第二个分组，匹配所有**不是]**的字符，也就是目标网址
  • g：全局标志，让正则匹配所有符合条件的内容，而非只匹配第一个
• 替换函数中，linkText和url是捕获到的内容，直接拼接成标准<a>标签即可

运行这段代码后，所有符合格式的链接都会被正确替换，得到你想要的目标文本。

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