Adding a class to an element within a string

Question

I'm wanting to add a class to the form element within the string. Is there an easy way to do this without jQuery?

var foo = '<form class="overlay"><div></div></form>';
foo.classList.add('bar');
console.log(foo);

You can use regex: foo = foo.replace(/class="(.*?)"/, function(m, $1) { return 'class="' + $1 + ' bar"'; }); — Tushar
– Tushar, Commented Apr 16, 2016 at 15:21

Lewis · Accepted Answer · 2016-04-16 15:47:39Z

1

The easiest way is to convert foo to a DOM element by using an inmemory div. Then you can convert it back to string with innerHTML after adding the expected class. By the way, it's not recommended to manipulate HTML string with regex or any other string manipulation methods.

var foo = '<form class="overlay"><div></div></form>';
var div = document.createElement('div');
div.innerHTML = foo;
div.querySelector('form').classList.add('bar');
alert(div.innerHTML);

edited Apr 16, 2016 at 15:47

answered Apr 16, 2016 at 15:20

Lewis

15k14 gold badges70 silver badges88 bronze badges

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

Collectives™ on Stack Overflow

Adding a class to an element within a string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related