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

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

• javascript
• jquery
• html
• regex

• Do you need to remove all the styles or h1 style only? – Kosh Commented Nov 27, 2018 at 14:49
• @KoshVery all styles for all elements. Basically what I really want is the vanilla version of all elements without any attributes or styles just pure skeleton. – Daniel Commented Nov 27, 2018 at 15:57
• I've updated my answer to help you strip any attributes. – Kosh Commented Nov 27, 2018 at 19:54

5 Answers 5

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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>

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./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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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)