javascript - 如何在 React 的新标签页中打开一些子链接

Question

我有一个用 React (NextJS) 构建的页面，我正在从 Wordpress 中提取一些标记字符串内容并将其插入到我的 JSX 中。 ，像这样:

...
<div className="wrapper">
  <p
     className="text-content"
     dangerouslySetInnerHTML={{ __html: post.content.rendered }}
  ></p>
</div>
...

现在，标记可能包含链接，我想在新选项卡上打开所有这些链接。所以我尝试了:

...
<div className="wrapper">
  <base target="_blank" />
  <p
     className="text-content"
     dangerouslySetInnerHTML={{ __html: post.content.rendered }}
  ></p>
</div>
...

标记中的所有链接都在新选项卡上打开，太棒了。但问题是页面中的所有其他链接，包括 div.wrapper 之外的链接。元素在新选项卡中打开(因为 <base /> 的范围是整个页面)，我想阻止这种情况。

因为我不能使用多个 <base />在同一页面上，我知道的另一个选项是使用 document.querySelector(".wrapper a") 遍历感兴趣的 anchor 标记。并添加 target所有这些都具有属性，但在 React 中，直接修改 DOM 是一种反模式。

所以我不确定如何最好地进行。我该怎么办？

Answer 1

您可以使用 DOMParser API 来实现这一点。

这是一个小片段

const parser = new DOMParser();
const htmlText = `<div><a href="#some-url">Url link</a></div>`;

let content = parser.parseFromString(htmlText, "text/html");
const anchors = content.getElementsByTagName('a');

Array.from(anchors).forEach(a => { 
    a.setAttribute("target", "_blank");
})


console.log(content.body.innerHTML); // Here it is your new string

代码可能需要改进一点，我只是从 MDN 示例中输入这个，我没有时间测试它。这行得通吗？