[英]Add target=“_blank” to link with JavaScript
我需要编写一个方法,该方法接受一个字符串并将其解析为链接(a href)。 如果它找到了一个链接,它应该将 target="_blank" 添加到链接中,如果它不存在的话。
示例:输入字符串“
<a href="www.google.com">Google</a> and <a href="www.yahoo.com"> target="_blank">Yahoo</a> are search engines
...应该导致输出字符串
<a href="www.google.com" target="_blank">Google</a> and <a href="www.yahoo.com" target="_blank">Yahoo</a> are search engines
知道如何实现这一点吗?
使用普通 js 不是很困难。
var links = document.getElementsByTagName('a');
var len = links.length;
for(var i=0; i<len; i++)
{
links[i].target = "_blank";
}
充满问题,但可以使用纯 JavaScript:
function addBlankTargets(s) {
return (""+s).replace(/<a\s+href=/gi, '<a target="_blank" href=');
}
或者使用 jQuery:
function addBlankTargets(s) {
var p = $('<p>' + s + '</p>');
p.find('a').attr('target', '_blank');
return p.html();
}
var s = '<a href="www.google.com">Google</a> and '
+ '<a href="www.yahoo.com">Yahoo</a> '
+ 'are search engines.';
var x = addBlankTargets(s);
x; // => '<a href="www.google.com" target="_blank">Google</a> and
// <a href="www.yahoo.com" target="_blank">Yahoo</a>
// are search engines.'
如果您的目标是现代浏览器,您可以将字符串转换为 DOM,而不是操作包含 HTML 的字符串并且必须处理所有许多特殊情况。 此时操作 DOM 是微不足道的,然后您可以将其转换回序列化字符串。
function decorateRichText(html) {
const domParser = new DOMParser()
const document = domParser.parseFromString(html, `text/html`)
const serializer = new XMLSerializer()
// Handles external links
const links = document.querySelectorAll(`a`)
links.forEach((link) => {
if (link.href) {
if (isExternalUrl(link.href)) {
link.target = `_blank`
link.rel = `noopener noreferrer`
}
}
})
return serializer.serializeToString(document)
}
让浏览器 JS 引擎做繁重的工作,记住:你不写的代码是你不必调试的代码 :-)
您可以使用 jQuery 解析元素,添加属性,然后读出 HTML,如下所示:
var addTarget = function(input) {
return $('<span>' + input + '</span>').find('a').attr('target', '_blank').html();
};
console.log(addTarget('<a href="www.google.com">Google</a>'));
在两行
var links = document.getElementsByTagName('a');
for(i in links)
links[i].target=="_blank"?links[i].style.color="#f0f" : links[i].style.color ='#0f0'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.