Regex - Replace Encoded Quotes Inside Style Attribute

Question

I need help writing a regular expression to parse a string of HTML to replace encoded quotations inside of the style attribute. There is content in my HTML string that contains the same encoded quote that should NOT be replaced (not inside style tags). Here's my failed RegEx:

/style=".*(")*.*"/ig

Obviously, this is wrong because I have very little skill when it comes to RegEx. For example, here is what I am trying to replace:

<p style="font-family:&quot;Times New Roman&quot; color: red; background:url(&quot;whatever&quot;);">test1</p><p style="font-family:&quot;Times New Roman&quot; color: blue;">THIS IS CONTENT &quot;DO NOT REPLACE!&quot;</p><p style="font-family:&quot;Times New Roman&quot; color: green;">test</p><p style="font-family:&quot;Times New Roman&quot; color: orange;">test2</p>

My desired output:

<p style="font-family:'Times New Roman' color: red; background:url('whatever');">test1</p><p style="font-family:'Times New Roman'; color: blue;">THIS IS CONTENT &quot;DO NOT REPLACE!&quot;</p><p style="font-family:'Times New Roman' color: green;">test</p><p style="font-family:'Times New Roman' color: orange;">test2</p>

All instances of " should be replaced that are inside of style="…", but not the ones in the content areas of HTML tags. Any help here is greatly appreciated!

Answer 1

There are several problems with your regexp /style=".*(")*.*"/ig :

• The character dot (.) will match anything, so (.)* will match all the way to the end of the string until it sees a double quote "

• You specify (")* with a *, so it will match any style="...", even if there is no (") in the style.

To overcome this problem, I think that you need to specify what characters are accepted within style along with ("), and it can happen any number of times within style.

A regexp like this will work:

regexp = /style="(([a-z0-9:-]|;|\s|\(|\))*(")([a-z0-9:-]|;|\s|\(|\))*)*"/i

A better version of it suggested by Toto in the comment:

regexp = /style="([a-z0-9:;\s()-]*(")[a-z0-9:;\s()-]*)*"/i

Here is a program I write in Ruby to test it:

st = %q(
  <p style="font-family:&quot;Times New Roman&quot; color: red; background:url(&quot;whatever&quot;);">test1</p>
  <p style="font-family:&quot;Times New Roman&quot; color: blue;">THIS IS CONTENT &quot;DO NOT REPLACE!&quot;</p>
  <p style="font-family:&quot;Times New Roman&quot; color: green;">test</p>
  <p style="font-family:&quot;Times New Roman&quot; color: orange;">test2</p>
  )

def replace_quotes_in_styles(st)
  regexp = /style="(([a-z0-9:-]|;|\s|\(|\))*(&quot;)([a-z0-9:-]|;|\s|\(|\))*)*"/i

  while (match_data = st.match(regexp)) do
    st = st.sub(match_data.to_s, match_data.to_s.gsub("&quot;", "'") )
  end

  st
end

puts replace_quotes_in_styles(st)

It will print some output like this:

<p style="font-family:'Times New Roman' color: red; background:url('whatever');">test1</p>
<p style="font-family:'Times New Roman' color: blue;">THIS IS CONTENT &quot;DO NOT REPLACE!&quot;</p>
<p style="font-family:'Times New Roman' color: green;">test</p>
<p style="font-family:'Times New Roman' color: orange;">test2</p>

Or more concise program:

 st = %q(
  <p style="font-family:&quot;Times New Roman&quot; color: red; background:url(&quot;whatever&quot;);">test1</p>
  <p style="font-family:&quot;Times New Roman&quot; color: blue;">THIS IS CONTENT &quot;DO NOT REPLACE!&quot;</p>
  <p style="font-family:&quot;Times New Roman&quot; color: green;">test</p>
  <p style="font-family:&quot;Times New Roman&quot; color: orange;">test2</p>
  )

def replace_quotes_in_styles(st)
  regexp = /style="([a-z0-9:;\s()-]*(&quot;)[a-z0-9:;\s()-]*)*"/i
  st.gsub(regexp) { |s| s.gsub("&quot;", "'") }
end

puts replace_quotes_in_styles(st)

Answer 2

What about the following PCRE?

/(?>style=")([^"]*?)"(.*?)"/g

The substitution string then has to be \1'\2'. Check it here.