Remove inline style from string element using javascript/jquery

Question

Suppose I have this string:

let string = '<h1 style="lots of class"> </h1><h2> <p style="bunch of class"> </p> <p style="bunch of class"> </p></h2>';

so basically it is a bunch of elements like this but in string:

<h1 style="bunch of class"> </h1>
<h2> 
  <p style="bunch of class"> </p>
  <p style="bunch of class"> </p>
</h2>

using jquery or vanilla javascript, how do I remove the style attribute from the string?

I have already tried this one:

$(string).find('h1').removeAttr('style');

but it is not working

Answer 1

There's two potential issues here. Firstly, you need to create a jQuery object from string and save a reference to it. If you don't do that you'll lose the changes you made to the HTML.

Secondly you need to use filter() instead of find() , as there is no single root level node to search from in the HTML string. Try this:

 let string = '<h1 style="color: red;">H1 Foo</h1><h2 style="color: yellow;">H2 Foo<p style="color: green;">P Foo</p><p style="color: blue;">P Foo</p></h2>'; let $string = $(string); $string.filter('h1').removeAttr('style'); $('body').append($string); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 2

What you can do is, create a virtual element in the code and place the content in it. then find the element and remove the attribute:

 let str = '<h1 style="lots of class">h1</h1><h2> <p style="bunch of class"> h2 > p</p> <p style="bunch of class"> h2 > p </p></h2>'; let $div = $('<div>') $div.html(str).find('h1').removeAttr('style'); $(document.body).append($div.html()) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 3

If you need to remove all the styles from the string, you might do it like this:

 let string = '<h1 style="color: red;">H1 Foo</h1><h2 style="color: yellow;">H2 Foo<p style="color: green;">P Foo</p><p style="color: blue;">P Foo</p></h2>'; $('<div>' + string + '</div>') .find('[style]').attr('style', null) .appendTo('body'); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Update
In order to give you what you really wanted, I wrote the following jQuery extension.
It strips all attributes from html fragment, except those you want to keep.
Can be applied to jQuery object.
Takes an array of attrs to keep (optional).
Returns html string like jQuery html() method does.

 $.fn.extend({ stripHTML: function(keep = []) { return $('<div>') .append(this) .find('*').each(function(i, e) { for (var {name} of [...e.attributes]) { if (!keep.includes(name)) e.removeAttribute(name); } }) .end() .html(); } }); let string = '<h1 Title="h1" style="color: red;">H1 Foo</h1><h2 style="color: yellow;">H2 Foo<p style="color: green;">P Foo</p><p style="color: blue;" >P <a href="foo">Foo</a></p></h2>'; let keep = ['href', 'name', 'value']; // attrs to keep let stripped = $(string).stripHTML(keep); $('body').html(stripped); console.log(stripped); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 4

Create a div and insert string to innerHTML of it. Then select h1 and remove style from it.

 var string = '<h1 style="color:red">h1</h1><h2 style="color:red">h2</h2>'; var div = document.createElement("div"); div.innerHTML = string; div.querySelector("h1").removeAttribute("style"); document.body.append(div) 

Answer 5

We can achieve this through regex.

const string = '<h1 style="lots of class"> </h1><h2> <p style="bunch of class"> </p> <p style="bunch of class"> </p></h2>';
const stringNoStyle = string.replace(/style="(.*?)" /g, '')
// <h1> </h1>
// <h2>
//    <p> </p>
//    <p> </p>
// </h2>