Как изменить атрибуты HTML в исходной строке с помощью Jquery или Javascript?

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

Затем вы можете использовать jQue Ry методы на этот новый элемент для изменения 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 геттер & сеттер свойство.

Обратите внимание, что Element.getElementsByTagName возвращает живойHTMLCollection, поэтому мы можем создать экземпляр объекта linksперед тем вставляют html строки. Для итерации в коллекции мы вызываем метод массива с коллекцией как контекст this.

Это уменьшает некоторые из накладных расходов 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.'));

И только потому, что здесь довольно гибкий метод JQuery. Работает над DOM и является цепным.

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>