Regex to remove HTML attribute from any HTML tag (style="")?

Question

I'm looking for a regex pattern that will look for an attribute within an HTML tag. Specifically, I'd like to find all instances of ...

style=""

... and remove it from the HTML tag that it is contained within. Obviously this would include anything contained with the double quotes as well.

I'm using Classic ASP to do this. I already have a function setup for a different regex pattern that looks for all HTML tags in a string and removes them. It works great. But now I just need another pattern for specifically removing all of the style attributes.

Any help would be greatly appreciated.

Use a parser. The "L" in "HTML" is the clue - "language". You might be lucky if your HTML is strict, but to be safe you'll need to parse it like a language - token by token. — Bohemian
– Bohemian ♦, Commented Sep 23, 2011 at 13:25
Use a parser, got it. I know even less about parsers than I do about RegEx's unfortunately. I'm going to do some research on them, but in the meantime, Jason Gennaro came up with a RegEx that gets the job done. Thanks. — jkupczak
– jkupczak, Commented Sep 23, 2011 at 14:30
Generally, you don't need to implement your own parser, you need to library. When you use a nicely written one, it's much easier this way. — d33tah
– d33tah, Commented Sep 3, 2014 at 17:21

CpILL · Accepted Answer · 2014-06-30 05:00:21Z

56

Perhaps a simpler expression is

 style="[^\"]*"

so everything between the double quotes except a double quote.

answered Jun 30, 2014 at 5:00

CpILL

7,2097 gold badges45 silver badges44 bronze badges

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

3 Comments

Cromwell Over a year ago

works very well. i couldn't make it work the accepted answer.

vsync Over a year ago

Fails for attributes surrounded with single-quotes:style='abc'

CpILL Over a year ago

Yeah, thats not in the HTML spec

Jason Gennaro · Accepted Answer · 2011-09-23 15:05:46Z

25

I think this might do it:

/style="[a-zA-Z0-9:;\.\s\(\)\-\,]*"/gi

You could also put these in capturing groups, if you wanted to replace some parts only

/(style=")([a-zA-Z0-9:;\.\s\(\)\-\,]*)(")/gi

Working Example: http://regexr.com?2up30

edited Sep 23, 2011 at 15:05

answered Sep 23, 2011 at 13:04

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

8 Comments

jkupczak Over a year ago

Close, but it's not taking hyphens into account. It stops matching as soon as it reaches one. Like text-align and background-color for example. regexr.com?2up1m

Jason Gennaro Over a year ago

Sorry @jimmykup! Forgot about the hyphen. I've edited the answer above with \-. Example updated too. Check it now. Should work.

jkupczak Over a year ago

Works great! Noticed that it was breaking on commas too though. Like font-family: Arial, Helvtica; but I know enough about RegEx to figure out how to add that in there as well. Thanks!

Jason Gennaro Over a year ago

Excellent @jimmykup! Glad it worked out. I've edited the answer to include the fix for the commas. Thx for catching.

ThoughtProcess Over a year ago

I would also recommend adding \# to capture styles that include color-related rules, like background: #ff0000

|

Sachin Gaur · Accepted Answer · 2019-03-07 08:29:35Z

5

Try this, it will replace style attribute and it's value completely

const regex = /style="(.*?)"/gm;
const str = `<div class="frame" style="font-family: Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; background-color: rgb(245, 245, 245);">some text</div>`;
const subst = ``;

// The substituted value will be contained in the result variable
const result = str.replace(regex, subst);

console.log('Substitution result: ', result);

answered Mar 7, 2019 at 8:29

Sachin Gaur

7378 silver badges6 bronze badges

1 Comment

xmedeko Over a year ago

Do /\s*style=(["'])(.*?)\1/gmi to be more flexible - supports apostrophes, removes extra blank, ignores case.

PersyJack · Accepted Answer · 2021-10-05 13:41:49Z

4

In visual studio find and replace, this is what i do to remove style and class attributes:

\s*style|class="[^"]*\n*"

This removes the beginning spaces and style and class attributes. It looks for anything except a double quote in these attributes and then newline(s), in case if it spreads out to new lines, and lastly adds the closing double quote

answered Oct 5, 2021 at 13:41

PersyJack

2,0121 gold badge24 silver badges33 bronze badges

Comments

Nataly S'omka · Accepted Answer · 2017-11-27 18:14:29Z

1

I tried Jason Gennaro's regular expression and slightly modified it

/style="[a-zA-Z0-9:;&\."\s\(\)\-\,]*|\\/ig

This regular expression captures some specific cases with &quot inside the string for example

 <div class="frame" style="font-family: Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; background-color: rgb(245, 245, 245);">some text</div>

answered Nov 27, 2017 at 18:14

Nataly S'omka

112 bronze badges

1 Comment

Joaquín Marcher Over a year ago

Worked for me with a simple change: `style="[a-zA-Z0-9:;&\."\s()\-\,]*"|\\`

foad abdollahi · Accepted Answer · 2021-12-05 16:20:53Z

1

try it:

(style|class)=(["'])(.*?)(["'])

answered Dec 5, 2021 at 16:20

foad abdollahi

2,04618 silver badges38 bronze badges

Comments

FailedDev · Accepted Answer · 2011-09-23 13:31:41Z

0

This works with perl. Maybe you need to change the regex to match ASP rules a little bit but it should work for any tag.

$file=~ s/(<\s*[a-z][a-z0-9]*.*\s)(style\s*=\s*".*?")([^<>]*>)/$1 $3/sig;

Where line is an html file.

Also this is in .net C#

      string resultString = null;
      string subjectString = "<html style=\"something\"> ";

      resultString = Regex.Replace(subjectString, @"(<\s*[a-z][a-z0-9]*.*\s)(style\s*=\s*"".*?"")([^<>]*>)", "$1 $3", RegexOptions.Singleline | RegexOptions.IgnoreCase);

Result : <html >

edited Sep 23, 2011 at 13:31

answered Sep 23, 2011 at 12:50

FailedDev

27k9 gold badges56 silver badges74 bronze badges

Comments

Dmitry Matrosov · Accepted Answer · 2016-08-01 19:20:12Z

0

This expression work for me:

style=".+"/ig

answered Aug 1, 2016 at 19:20

Dmitry Matrosov

4204 silver badges5 bronze badges

1 Comment

IanB Over a year ago

You should exclude double quotes in the character match e.g. style="[^"]+"/ig

indextwo · Accepted Answer · 2020-01-07 13:36:49Z

0

The following expression should remove anything within a style attribute (including the attribute itself); crucially this includes whether the attribute uses double or single quotes:

/style=("|')(?:[^\1\\]|\\.)+?\1/gi

This splits the capture groups so that they can match on single or double-quotes, and then capture anything in between, including URL-encoded characters & line breaks, whilst leaving other attributes (like classes or names) intact.

Tested here: https://regexr.com/4rovf

answered Jan 7, 2020 at 13:36

indextwo

5,9556 gold badges52 silver badges68 bronze badges

1 Comment

Lauri Over a year ago

In JavaScript back reference does not work inside a character class, \1 === \x01. try swap the order: /style=("|')(?:\\\1|.)+?\1/gi

Collectives™ on Stack Overflow

Regex to remove HTML attribute from any HTML tag (style="")?

9 Answers 9

3 Comments

8 Comments

1 Comment

Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

8 Comments

1 Comment

Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related