Jquery veya Javascript ile bir ham stringde HTML öznitelikleri nasıl değiştirilir?

Bir grup anchor etiketini almak ve hepsinin yeni bir sekmede açılmasını sağlamak istiyorum.

Böyle bir şey yapmam gerektiğini biliyorum $ ('a').attr('target', '_blank'); ama mesele şu ki, değiştirmeye çalıştığım HTML bir string değişkenin içinde.

Örneğe bakın:

Bunda olduğu gibi bir dizi ham HTML içeren bir string’im var:

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

Bunu şöyle bir şeye nasıl dönüştürebilirim:

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

Cevap #1

jQuery kullanarak dizgeyi DOM dışındaki bir elemana ekleyebilirsiniz

Ardından bu yeni eleman üzerinde jQuery yöntemlerini kullanarak HTML'i değiştirebilir ve ardından değiştirilmiş string'i döndürebilirsiniz:

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

Cevap #2

Saf JavaScript'te, bunu document.createElement, Element.getElementsByTagName ve Element.setAttribute yöntemlerini ve ayrıca Element.innerHTML alıcı & ayarlayıcı özelliğini kullanarak yapabiliriz.

Şu noktayı unutmayın: Element.getElementsByTagName bir canlı HTMLCollection döndürür, bu yüzden html stringini eklemeden önce links nesnesini oluşturabiliriz. Koleksiyon üzerinde yineleme yapmak için, koleksiyonu this bağlamı olarak kullanarak bir dizi yöntemi çağırırız.

Bu, jQuery'nin bazı ek yükünü azaltır.

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

Ve sadece bu yüzden, işte oldukça esnek bir jQuery yöntemi. DOM üzerinde çalışır ve zincirlenebilir.

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>