Removing inline styles from html string

Question

I'm getting data from Wordpress, which contains HTML with inline styles. Before I insert this HTML into my React website, I would like to remove all inline styles. For example, I get something like:

<div style='height: 500px'>
<img  style='height: 300px; width: 250px'/>
... more elements with inline styles
</div>

I'm looking for a clean way of doing this because I've tried using other solutions on SO and they use Jquery and other JS methods which would not work since I'm using React to build my website.

Hassan Imam · Accepted Answer · 2021-07-05 05:19:29Z

2

You call select all the html tags and using document.querySelectorAll('*') and iterate through each one of them and using removeAttribute, removes style attribute.

const htmlString = `<div style='height: 500px'>
<img  style='height: 300px; width: 250px'/>
<p> text</p>
<div style="color: red">Red text</div>
... more elements with inline styles
</div>`;
const htmlNode = document.createElement('div');
htmlNode.innerHTML = htmlString;
htmlNode.querySelectorAll('*').forEach(function(node) {
    node.removeAttribute('style');
});
console.log(htmlNode.innerHTML);

answered Jul 5, 2021 at 5:19

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

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

Comments

Alireza Ahmadi · Accepted Answer · 2021-07-05 05:20:15Z

1

You can find all tag in your body then use removeAttribute to remove style attribute.

function remove(){

   var allBodyTag = document.body.getElementsByTagName("*");

   for (var i = 0; i < allBodyTag.length; i++) {
       allBodyTag[i].removeAttribute("style");
   }
}

<button onClick="remove()">Remove </button>
<div style='height: 500px'>
This is text
<img  style='height: 50px; width: 250px'/>
</div>

answered Jul 5, 2021 at 5:20

Alireza Ahmadi

10.2k8 gold badges28 silver badges66 bronze badges

Collectives™ on Stack Overflow

Removing inline styles from html string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related