Wie ändert man HTML-Attribute in einem rohen String mit jQuery oder Javascript?

Ich möchte eine Reihe von Anker-Tags nehmen und sicherstellen, dass sie alle in einem neuen Tab geöffnet werden.

Ich weiß, ich sollte so etwas wie $ ('a').attr('target', '_blank'); machen, aber der Haken ist, dass das HTML, das ich versuchen zu ändern, in einer String-Variablen ist.

Siehe Beispiel:

Ich habe eine Menge rohen HTML-Code in einem String wie diesem:

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

Wie kann ich das in etwa Folgendes umwandeln:

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

Antwort #1

Mit jQuery können Sie den String an ein Element außerhalb des DOM anhängen

Sie können dann jQuery-Methoden auf diesem neuen Element verwenden, um das HTML zu ändern und dann die modifizierte Zeichenkette zurückzugeben:

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();

Antwort #2

In reinem JavaScript können wir dies tun, indem wir die Methoden document.createElement, Element.getElementsByTagName und Element.setAttribute sowie die Getter- und Setter-Eigenschaft Element.innerHTML verwenden.

Beachten Sie, dass Element.getElementsByTagName eine aktive HTMLCollection zurückgibt, weshalb wir das links-Objekt bevor wir die html-Zeichenkette einfügen, instanziieren können. Um über die Sammlung zu iterieren, rufen wir eine Array-Methode mit der Sammlung als this-Kontext auf.

Dies reduziert einen Teil des Overheads von jQuery.

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.'));

Und nur weil, hier ist eine recht flexible jQuery-Methode. Funktioniert im DOM und ist kettebar.

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());

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