How to change HTML attributes in a raw string with Jquery or Javascript?

Question

I want to take a bunch of anchor tags and make sure that they all open in a new tab.

I know I should do something like this $('a').attr('target', '_blank'); but the catch is that the HTML I am trying to modify is in a string variable.

See example:

I have a bunch of raw HTML in a string like this:

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

How can I convert that to be something like this:

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

Answer 1

Using jQuery you can append the string to an element outside of the DOM

You can then use jQuery methods on this new element to modify the html and then return the modified string:

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