Regex search & replace inline CSS style

Question

I need to search & replace inside HTML tags, CSS that was inlined, in order to avoid using the style="" attribute inline.

I.e. replace something that looks like this:

<table border="0" cellpadding="0" cellspacing="0" width="100%"  style="font-family: Helvetica;line-height: 100%;margin-top: 20px; text-align: left;vertical-align: bottom;color: #202020">

into something like that:

<table border="0" cellpadding="0" cellspacing="0" width="100%" font-family="Helvetica" line-height="100%" margin-top="20px" text-align="left" vertical-align="bottom" color="#202020">

Does someone know the regex for search & replace I would have to write in order to do that?

Thanks.

I don't think you can do that in a single pass. I'd do this with preg_replace_callback in PHP. Start with style="(.+?)". Also no way to know if attributes are valid going this route.. — chris85
– chris85, Commented Jul 13, 2015 at 18:37
What are you trying to do? A font-family attribute on a table tag won't do anything at all. — user663031
– user663031, Commented Jul 13, 2015 at 19:45

Wiktor Stribiżew · Accepted Answer · 2015-07-13 19:31:59Z

5

Use this regex replacement:

(?:\G(?!^)|\bstyle=")([^:]*):\s*([^;]*)[;"](?=[^>]*>)

Replace with (mind the space at the end):

$1="$2"

Here is a demo

EXPLANATION

(?:\G(?!^)|\bstyle=") - A boundary where we'll start our matching. The boundary is the end of the previous match (\G(?!^)) or style=" (due to \bstyle=").
([^:]*) - The 1st capturing group that holds a sequence of 0 or more characters other than :
: - a literal :
\s* - 0 or more whitespace
([^;]*) - The 2nd capturing group that holds a sequence of 0 or more characters other than ;
[;"] - Either a ; or "
(?=[^>]*>) - We check the ending boundary to make sure we are inside a closing tag.

edited Jul 13, 2015 at 19:31

answered Jul 13, 2015 at 18:51

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

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

4 Comments

Wiktor Stribiżew Over a year ago

I added explanations.

ericn Over a year ago

thanks but your regex fails when there 2 style="some css style" in the same string

Wiktor Stribiżew Over a year ago

@eric: Please provide some sample input string (better as a regex101.com link). Just guessing: maybe (?:\G(?!^)|\bstyle=")([^:>]*):\s*([^;>]*)[;"](?=[^>]*>) will work for you.

ericn Over a year ago

for example: ` <div><span style="line-height: 1.42857;">GDP Growth</span><br></div><div>  in 2014</div><div>    2.9%</div> <div><span style="line-height: 1.42857;">GDP in 2014</span><br></div><div> S$390.0 Bil</div> how to raise funding for a bussiness`

Anders · Accepted Answer · 2015-07-13 18:45:20Z

5

You could do it like this:

Match style="(.*?)" and save the captured group to a variable.
On that variable, match ([a-zA-Z-]+):\s*(.*?)\s*; and replace it with {1}="{2}".
Replace style=".*?" with the result of number 2.

answered Jul 13, 2015 at 18:45

Anders

8,66310 gold badges60 silver badges101 bronze badges

2 Comments

Abram Over a year ago

style="(.*?)" was great, and in my case I used the same matching for replacing all these absolute height definitions with height='auto'. Very helpful!

Cyberdelphos Over a year ago

Thank you so much, you've just saved me like 2 hours of work!

Collectives™ on Stack Overflow

Regex search & replace inline CSS style

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related