添加 target="_blank" 以与 JavaScript 链接答案

【问题标题】：Add target="_blank" to link with JavaScript添加 target="_blank" 以与 JavaScript 链接
【发布时间】：2011-07-25 22:08:21
【问题描述】：

我需要编写一个方法，该方法接受一个字符串并将其解析为链接（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

知道如何实现这一点吗？

【问题讨论】：

只需将<a 替换为<a target="_blank"
您是否必须将 s 作为字符串检索？你能用js把它们作为元素吗？
很遗憾，是的。没有办法通过 DOM 获取它们
@Paul 你为什么不能通过 dom 访问它们？

标签： javascript

【解决方案1】：

简单的 js 不是很困难。

var links = document.getElementsByTagName('a');
var len = links.length;

for(var i=0; i<len; i++)
{
   links[i].target = "_blank";
}

【讨论】：

【解决方案2】：

充满问题，但可以使用纯 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.'

【讨论】：

jQuery 解决方案听起来不错，但我绝对是 JavaScript 的初学者。那么，在我拥有 x 中的字符串（我假设的一个数组）之后，我怎样才能将它们组合回一个字符串？
@Paul：为了完整性，我更新了我的 jQuery 答案，看看是否适合你。基本上，在 jQuery 中，要获取“外部 HTML”，您必须首先将项目包装在另一个元素中并获取其内部 HTML。

【解决方案3】：

如果您的目标是现代浏览器，您可以将字符串转换为 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 引擎做繁重的工作并记住：你不编写的代码是你不必调试的代码 :-)

【讨论】：

【解决方案4】：

你可以使用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>'));

【讨论】：

【解决方案5】：

两行

var links = document.getElementsByTagName('a');
for(i in links)
    links[i].target=="_blank"?links[i].style.color="#f0f" : links[i].style.color ='#0f0'

jsfiddle

【讨论】：