代码之家 › 专栏 › 技术社区 › Basj

向HTML字符串中的每个链接添加target=\u blank

hyperlink dom html javascript

Basj · 技术社区 · 6 年前

我有一根绳子 s (HTML格式的文本段落),我用它将其包含在 div 。

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

s 可能包含一些 <a href="...">...</a> 链接。 如何自动添加 target="_blank" 到这些链接? (这样,如果用户单击它们,它将不会替换当前页面)

我在考虑使用某种正则表达式来检测 s ,检测target=\u blank是否已经存在,如果没有,则添加它,但这似乎很复杂。是否最好添加 target=_blank 之后 s 插入DOM后 .innerHTML = s ?如果是,如何?

2 回复 | 直到 6 年前

Mamun 6 年前

添加锚点后 innerHTML ,使用 querySelectorAll() 。然后设置 target 具有的属性 setAttribute() 如下所示:

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

gurvinder372 6 年前

在DOM中插入s后,是否最好添加target=\u blank 之后innerHTML=s?如果是,如何?

在完成 innerHTML

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

迭代所有链接 a 在…内 myDiv 并设置此属性 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

推荐文章

Haim Ohayon · 这些链接之间有什么区别?

2 年前

Ancross · 链接未路由到组件

2 年前

shellz · 如何在html中设置切换到不同部分的动画?

2 年前

Dylan L. · React Router v6链接组件不更改根url处的页面

2 年前

Jake · 如何在php中回显链接到网站的照片?

2 年前

May Mammaz · Streamlight数据帧中的超链接

2 年前

GraphiX · 当使用“超链接”容器时,屏幕大小不会缩小

6 年前

Pim92 · fpdf:具有动态变量名的多个动态链接

6 年前

viswanathan R · 地址和电话号码在gmail中以蓝线显示

6 年前

Brian Duncan · 无理由包含当前url的HTML链接

6 年前