Cum să schimbi atributele HTML într-un șir brut cu Jquery sau Javascript?

Vreau să iau mai multe etichete de ancoră și să mă asigur că toate se deschid într-un tab nou.

Știu că ar trebui să fac ceva de genul acesta $ ('a').attr('target', '_blank');, dar problema este că HTML-ul pe care încerc să-l modific se află într-o variabilă de tip șir de caractere.

Vezi exemplul:

Am un teanc de HTML brut într-un șir ca acesta:

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

Cum pot să convertesc asta să fie ceva de genul acesta:

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

Răspuns #1

Folosind jQuery poți adăuga șirul la un element din afara DOM-ului

Poți apoi folosi metodele jQuery pe acest element nou pentru a modifica HTML-ul și apoi a returna șirul modificat:

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

Răspunsul #2

În JavaScript pur, putem face acest lucru folosind metodele document.createElement, Element.getElementsByTagName și Element.setAttribute, precum și proprietatea getter & setter Element.innerHTML.

Rețineți că Element.getElementsByTagName returnează un HTMLCollection live, motiv pentru care putem instanția obiectul links înainte de a insera șirul html. Pentru a itera peste colecție, invocăm o metodă de array cu colecția ca context this.

Acest lucru reduce o parte din suprasarcina 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.'));

Și doar pentru că, iată o metodă jQuery destul de flexibilă. Funcționează pe DOM și poate fi înlănțuită.

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>