🧹

How to Remove Inline Styles from HTML: 4 Methods

Quick answer: For a couple of elements, edit the HTML by hand. For a whole page rendered in the DOM, run document.querySelectorAll('*').forEach(el => el.removeAttribute('style')) in the console. For a block of raw HTML text you're about to publish, use a real HTML parser rather than a regex — regex-based find-and-replace reliably misses single-quoted attributes and multi-line values.

Why remove inline styles at all?

Inline styles override your stylesheet, which is exactly the problem when they arrive from somewhere else — a Word paste, an old CMS export, a page builder that hardcodes every color and margin onto the element itself. They also can't be reused, can't be cached the way an external stylesheet can, and bloat the size of every page they're on. Removing them lets your actual CSS do its job again.

Method 1: edit the HTML by hand

For a snippet with two or three elements, this is genuinely the fastest option. Open it in a code editor and delete each style="..." attribute directly. No tooling required, and no risk of a script doing something you didn't intend. It stops being the fastest option somewhere around a dozen elements, and it doesn't scale to "do this every time someone pastes from Word."

Method 2: a regex find-and-replace

A pattern like this looks like it should work:

text.replace(/ style="[^"]*"/g, '')

And it does, for HTML that only uses double-quoted attributes with no line breaks inside the value. It misses style='color:red' with single quotes. It breaks on a multi-line style value, which Word-generated HTML produces more often than you'd expect. And a common variant of this pattern — one built from a character class instead of a straightforward [^"]* — can silently exclude characters like underscores, which means an attribute value containing one survives untouched with no error or warning. Regex operates on the text of your HTML, not its structure, so it only ever catches the specific shapes you wrote a pattern for.

Method 3: JavaScript, on a live page

If the HTML is already rendered in a browser (your own page, or someone else's, via the console), the DOM API removes the guesswork:

document.querySelectorAll('*').forEach(el => el.removeAttribute('style'));

With jQuery, the equivalent is $('*').removeAttr('style'). Both work on the actual parsed element tree, so quote style and line breaks in the original markup are irrelevant — by the time you're calling removeAttribute, the browser has already parsed the attribute correctly regardless of how it was written.

Free Web Design & Marketing Guides. Practical guides on web performance, SEO, and getting more from your website — no email gate. Browse the Guides →

Method 4: parse the HTML as text you're about to publish

The regex problem in Method 2 goes away once you parse the markup instead of pattern-matching it. DOMParser reads a string of HTML the same way a browser does, builds a real element tree from it, and lets you strip attributes by name with removeAttribute — the same reliable method as Method 3, just applied to a string instead of a live page. That's the difference between a tool that catches every quote style and one that only catches the ones its author thought to test.

The HTML Cleaner on this site works this way: paste your HTML, choose what to remove, and it parses the markup rather than pattern-matching it, so single or double quotes and multi-line values are handled the same way. It runs entirely in your browser.

Frequently asked questions

What's the fastest way to remove inline styles from a small HTML snippet?

For a handful of elements, find-and-replace in a code editor with regex support works fine. For anything larger, or anything you need to run more than once, a script or tool is faster and more reliable.

Why does a regex to remove style attributes sometimes miss some?

A regex written to match double-quoted style attributes won't match single-quoted ones, and a character class built from a narrow range often excludes underscores or other punctuation. Multi-line style values break single-line patterns entirely. Regex works on text, not structure, so it only catches the shapes you explicitly wrote a pattern for.

Does removeAttribute('style') work in every browser?

Yes. removeAttribute is a standard DOM method supported in every current browser, and it's the correct way to remove an inline style attribute from an element in JavaScript.

HTML & CSS Cleaner Tool

As web developers and designers, we often encounter HTML files laden with inline styles—those pesky CSS rules embedded directly within HTML tags. While this approach might seem convenient at first, it can lead to bloated code, slower page load times, and maintenance headaches. Fear not! Our HTML and CSS Cleaner Tool comes to the rescue. Whether you’re a seasoned developer or just starting your web journey, understanding the importance of clean HTML and CSS is essential.

Built and maintained by Bootstrap Creative, a web design and marketing agency for B2B and manufacturing companies. · Blog