如何使用Jquery或Javascript更改原始字符串中的HTML属性？

Question

我想采取一堆锚标记并确保它们都在新标签中打开。

我知道我应该做这样的事情$('a').attr('target', '_blank');，但问题是我试图修改的HTML是一个字符串变量。

参见示例：

我在这样的字符串中有一堆原始HTML：

var rawHTML = "Hello there, <a href="http://www.google.com">this</a> is a link."

如何将其转换为以下内容：

processedHTML = "Hello there, <a href="http://www.google.com" target="_blank">this</a> is a link."

Answer 1

使用jQuery，您可以将字符串附加到DOM之外的元素

然后，您可以在此新元素上使用jQuery方法来修改html，然后返回修改后的字符串：

var rawHTML = 'Hello there, <a href="http://www.google.com">this</a> is a link.';
// create element and set string as it's content
var $div = $('<div>').html(rawHtml);
// modify attributes
$div.find('a').attr('target', '_blank');
// return modified content to string
var processedHTML = $div.html();

Answer 2

在纯JavaScript中，我们可以通过使用document.createElement，Element.getElementsByTagName和Element.setAttribute方法以及Element.innerHTML getter＆amp; setter property。

请注意，Element.getElementsByTagName会返回 live HTMLCollection，这就是为什么我们可以在插入之前实例化links对象的原因html字符串。为了迭代集合，我们调用一个数组方法，将集合作为this上下文。

这减少了jQuery的一些开销。

＆＃13;

＆＃13;

function blankify (html) {
  var root = document.createElement('span'),
      links = root.getElementsByTagName('a');
  
  root.innerHTML = html;
  
  Array.prototype.forEach.call(links, function (e) {
    e.setAttribute('target', '_blank');
  });
  
  return root.innerHTML;
}

console.log(blankify('Hello there, <a href="http://www.google.com">this</a> is a link.'));

＆＃13;

＆＃13;

＆＃13;

只是因为，这是一个相当灵活的jQuery方法。适用于DOM，可以链接。

＆＃13;

＆＃13;

jQuery.prototype.blankify = function () {
  return this.find('a').attr('target', '_blank'), this;
};

console.log($('<span/>', {
  html: 'Hello there, <a href="http://www.google.com">this</a> is a link.'
}).blankify().html());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;