将 target=_blank 添加到 HTML 字符串中的每个链接答案

【问题标题】：Add target=_blank to every link in a HTML string将 target=_blank 添加到 HTML 字符串中的每个链接
【发布时间】：2018-09-02 00:19:21
【问题描述】：

我有一个字符串 s（HTML 格式的文本段落），我正在使用它来将它包含在 div 中。

document.getElementById("mydiv").innerHTML = s;

s 可能包含一些 <a href="...">...</a> 链接。 如何在这些链接中自动添加target="_blank"？（这样如果用户点击它们，它就不会替换当前页面）

我正在考虑使用某种正则表达式来检测 s 中的链接，检测 target=_blank 是否已经存在，如果不存在，则添加它，但这似乎很复杂。在.innerHTML = s 之后将s 插入到DOM 之后添加target=_blank 会更好吗？如果有，怎么做？

【问题讨论】：

标签： javascript html dom hyperlink

【解决方案1】：

使用innerHTML 添加锚点后，遍历所有使用querySelectorAll() 的锚点。然后使用setAttribute() 设置target 属性，如下所示：

document.querySelectorAll("#mydiv a").forEach(function(a){
  a.setAttribute('target', '_blank');
})

【讨论】：

【解决方案2】：

在 DOM 中插入 s 后添加 target=_blank 会更好吗在 .innerHTML = s?如果有，怎么做？

做完innerHTML之后

document.getElementById("mydiv").innerHTML = s;

迭代myDiv内的所有链接a并将target属性设置为它们

var myDivEl = document.getElementById( "mydiv" ); //get the reference to myDiv element
var anchorsInMyDiv = myDivEl.querySelectorAll( "a" ); //get all the anchors in myDiv element
[ ...anchorsInMyDiv ].forEach( s => s.setAttribute( "target", "_blank" ) ); //iterate all the anchors and set the attribute

【讨论】：