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

add string starting at a specific index

EugenSunic
– EugenSunic

2015-08-01 22:31:40 +00:00
Commented Aug 1, 2015 at 22:31 — EugenSunic
– EugenSunic, Commented Aug 1, 2015 at 22:31

serkan · Accepted Answer · 2019-10-29 12:23:27Z

16

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

edited Oct 29, 2019 at 12:23

serkan

7,1714 gold badges43 silver badges50 bronze badges

answered Aug 1, 2015 at 22:33

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oka · Accepted Answer · 2015-08-02 14:14:59Z

3

In pure JavaScript, we can do this by making use of the document.createElement, Element.getElementsByTagName, and Element.setAttribute methods, as well as the Element.innerHTML getter & setter property.

Note that Element.getElementsByTagName returns an live HTMLCollection, which is why we can instantiate the links object before we insert the html string. To iterate on the collection, we invoke an array method with the collection as the this context.

This reduces some of the overhead of 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.'));

And just because, here's a fairly flexible jQuery method. Works on the DOM, and is chainable.

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>

answered Aug 2, 2015 at 14:14

Oka

27.1k7 gold badges51 silver badges59 bronze badges

1 Comment

Teodor Sandu Over a year ago

I'm not sure why this answer doesn't have more upvotes, i think this should have been the accepted one because a plain JS solution is way more portable than a vendor lock-in.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related