如何将JSON的message字段中多个<articleNo>标签替换为商品跳转链接

核心原理 #

你之前的代码只能替换单个标签，是因为没有给正则加全局匹配标志g，也没有遍历所有匹配结果做批量处理。这里推荐用String.replace()+全局正则+回调函数的方案，是实现批量替换最简洁的写法。

最终实现代码 #

function replaceArticleNoToLink(message) {
  // 商品链接模板
  const linkTemplate = window.app.props.url.adp;
  // 带全局匹配标志g的正则，匹配所有<articleNo>标签，捕获组提取商品编号
  const reg = /<articleNo>(.*?)<\/articleNo>/g;

  return message.replace(reg, (matchedStr, productId) => {
    const productLink = linkTemplate.replace('{productId}', productId);
    // 生成带rel属性的a标签，和你要求的效果一致
    return `<a href="${productLink}" rel="nofollow noreferrer">${productLink}</a>`;
  });
}

代码说明 #

• 正则末尾的g标志代表全局匹配，会扫描整个message字符串找到所有符合格式的标签
• replace方法的第二个参数传入回调函数时，每匹配到一个标签就会自动执行一次回调：
  • 回调第一个参数是完整匹配到的标签字符串（比如<articleNo>32210544030</articleNo>）
  • 回调第二个参数是正则第一个捕获组的内容，也就是你要的商品编号
• 回调返回生成好的a标签，replace方法会自动把所有匹配到的标签都替换成对应a标签，无需手动遍历

注意：如果你拿到的message里的尖括号是HTML实体编码（也就是<和>），只需要把正则改成/<articleNo>(.*?)<\/articleNo>/g即可，其余逻辑不变。

可选：matchAll写法参考 #

如果你想用之前尝试的matchAll方法，可参考如下实现：

function replaceArticleNoToLink(message) {
  const linkTemplate = window.app.props.url.adp;
  const reg = /<articleNo>(.*?)<\/articleNo>/g;
  let result = message;
  // 遍历所有匹配结果
  for (const match of message.matchAll(reg)) {
    const fullTag = match[0];
    const productId = match[1];
    const productLink = linkTemplate.replace('{productId}', productId);
    const aTag = `<a href="${productLink}" rel="nofollow noreferrer">${productLink}</a>`;
    // 替换所有对应标签
    result = result.replaceAll(fullTag, aTag);
  }
  return result;
}

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