Regex to Match HTML Style Properties.

Question

In need of a regex master here!

<img src="\img.gif" style="float:left; border:0" />
<img src="\img.gif" style="border:0; float:right" />

Given the above HTML, I need a regex pattern that will match "float:right" or "float:left" but only on an img tag.

Thanks in advance!

Answer 1

/<img\s[^>]*style\s*=\s*"[^"]*\bfloat\s*:\s*(left|right)[^"]*"/i

Have to advise you, though: in my experience, no matter what regex you write, someone will be able to come up with valid HTML that breaks it. If you really want to do this in a general, reliable way, you need to parse the HTML, not throw regexes at it.

Answer 2

You really shouldn't use regex to parse html or xml, it's impossible to design a foolproof regex that will handle all corner cases. Instead, I would suggest finding an html-parsing library for your language of choice.

That said, here's a possible solution using regex.

<img\s[^>]*?style\s*=\s*".*?(?<"|;)(float:.*?)(?=;|").*?"

The "float:" will be captured in the only capturing group there, which should be number 1.

The regex basically matches the start of an img tag, followed by any type of character that isn't a close bracket any number of times, followed by the style attribute. Within the style attribute's value, the float: can be anywhere within the attribute, but it should only match the actual float style (i.e. it's preceded by the start of the attribute or a semicolon and followed by a semicolon or the end of the attribute).

Answer 3

Test this C# code:

            string[] test = new String[] { 
                "<img src=\"\\img.gif\" style=\"float:left; border:0\" />",
                "<img src=\"\\img.gif\" style=\"border:0; float:right\" />" 
            };
            Regex regex = new Regex(@"\<img[^>]*?style[\s]*?=.*?float:([\w]+).*?/\>", RegexOptions.Compiled);
            foreach (String s in test)
            {
                Match match = regex.Match(s);
                if (match.Success)
                {
                    Console.WriteLine(match.Groups[1].Value);
                }
            }

Answer 4

I agree with Sean Nyman, it's best not to use a regex (at least not for anything permanent). For something ad-hoc and a bit more durable, you might try:

/<img\s(?:\s*\w+\s*=\s*(?:'[^']*'|"[^"]*"))*?\s*\bstyle\s*=\s*(?:"[^"]*?\bfloat\s*:\s*(\w+)|'[^']*?float\s*:\s*(\w+)/i