使用DOMPurify时，dangerouslySetInnerHTML内的replaceAll无法为链接添加target="_blank"的问题

嘿，我来帮你理清楚这个问题——你遇到的核心问题其实是DOMPurify的默认安全策略在搞鬼！

你原来的思路是先通过replaceAll给链接加上target="_blank"，再用DOMPurify净化，但DOMPurify的默认规则里不允许target属性，所以它会直接把你刚加上的target="_blank"给清理掉，自然就看不到效果了。而且说实话，用replaceAll处理HTML字符串本身就不太靠谱，万一文本里刚好出现"href"这个词（比如某个段落里提到了href属性），也会被错误替换，反而搞乱页面内容。

给你两个更靠谱的解决方案，按需选：

方案一：用DOMPurify的钩子自动添加target（推荐） #

这种方法既安全又精准，还能顺便补上安全属性：

// 先配置DOMPurify，允许target属性，同时自动给a标签加target和安全rel属性
const sanitizedHtml = purify.sanitize(bodyHtml, {
  // 把target加入允许的属性白名单
  ADD_ATTR: ['target'],
  // 利用净化后的钩子处理元素
  AFTER_SANITIZE_ELEMENT: (node) => {
    // 只处理带href的a标签
    if (node.tagName === 'A' && node.hasAttribute('href')) {
      node.setAttribute('target', '_blank');
      // 一定要加这个rel属性，防止target="_blank"带来的安全风险
      node.setAttribute('rel', 'noopener noreferrer');
    }
  }
});

// 然后在组件里正常使用
dangerouslySetInnerHTML={{ __html: sanitizedHtml }}

这个方法的好处是完全基于DOM节点处理，不会误改非链接里的内容，还符合安全规范。

方案二：先净化再手动处理DOM元素 #

如果你不想用DOMPurify的钩子，也可以先净化HTML，再用临时DOM来修改链接：

// 第一步先净化HTML，确保内容安全
const sanitizedHtml = purify.sanitize(bodyHtml);

// 创建一个临时div来处理DOM
const tempContainer = document.createElement('div');
tempContainer.innerHTML = sanitizedHtml;

// 遍历所有带href的a标签，添加属性
tempContainer.querySelectorAll('a[href]').forEach(link => {
  link.setAttribute('target', '_blank');
  link.setAttribute('rel', 'noopener noreferrer');
});

// 拿到处理后的最终HTML
const finalHtml = tempContainer.innerHTML;

// 组件中使用
dangerouslySetInnerHTML={{ __html: finalHtml }}

不管选哪种，都比你原来的字符串替换靠谱得多，而且能保证DOMPurify的安全净化效果不受影响。

备注：内容来源于stack exchange，提问作者splunk