Parsing CSS files using RegEX

Question

I'm messing around with CSS files, and I'm trying to traverse through a CSS file using PHP. What I'm looking for is capturing any image path within a url() selector, using regex (any faster ways you know?).

So far I was able to find this expression: url(([^)]+))
but that one isn't 100% what I'm looking for. I need an expression that finds the url selector and captures anything inside it, meaning if the code includes quotes or single quotes, they will not be captured. e.g: url("images/sunflower.png") the captured string should only be: images/sunflower.png

Appreciate the help.

This is not as simple as it may first appear. The URL may or may not be enclosed within 'single' or "double" quotation marks and the URL itself may or may not contain matching or not-matching parentheses. However, if the CSS file is of your own creation and you know its makeup, then that is a different story. — ridgerunner
– ridgerunner, Commented Jun 15, 2013 at 13:21

bPratik · Accepted Answer · 2013-06-15 12:53:30Z

2

Please do not reinvent the wheel, where you can avoid...

There are a multitude of CSS parsers that are freely available on the internet. If you are keen to know how it is done, crack open one of the open source ones and see how it is done. Here's an example that took 2 minutes to find:

https://github.com/sabberworm/PHP-CSS-Parser#value

I have pointed you to the part that actually shows how to extract the URL too.

answered Jun 15, 2013 at 12:53

bPratik

7,0114 gold badges40 silver badges70 bronze badges

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

2 Comments

elad.chen Over a year ago

Thanks. I'm aware of that, Nevertheless, I want to avoid adding to much code for a simple task. All I need is that regex, since it will be used for a very small bit of css file, I consider using a dedicated parser an overkill.

bPratik Over a year ago

Yes, it is overkill for your purposes, but it might be wise to check how that library parses the CSS. this will tell you how to do it yourself.

George Reith · Accepted Answer · 2013-06-15 13:24:04Z

Try this out for size. It will not work on strings which start with url( but if you are parsing actual CSS then it is invalid to start without a selector or property anyway.

$data =' #foo { background: url("hello.jpg"); } #bar { background: url("flowers/iris.png"); }';
$output = array();
foreach(explode("url(", $data) as $i => $a) { // Split string into array of substrings at boundaries of "url(" and loop through it
    if ($i) {
        $a = explode(")", $a); // Split substring into array at boundaries of ")"
        $url = trim(str_replace(array('"',"'"), "", $a[0])); // Remove " and ' characters
        array_push($output, $url);
    }
} 
print_r($output);

Outputs:

Array ( [0] => hello.jpg [1] => flowers/iris.png )

Vektah · Accepted Answer · 2013-06-15 13:27:06Z

0

While I agree with bPratik's answer, perhaps all you need is:

preg_match('/url\([\'"]?([^)]+?)[\'"]?\)/', 'url("images/sunflower.png")', $matches);

/**
url\( matches the url and open bracket
[\'"]+? matches a quote if there is one
([^]+?) matches the contents non-greedy (so the next closing quote wont get stolen)
[\'"]? matches the last quote
) matches the end.
*/

var_dump($matches);
array(2) {
  [0]=>
  string(27) "url("images/sunflower.png")"
  [1]=>
  string(20) "images/sunflower.png"
}

answered Jun 15, 2013 at 13:27

Vektah

2391 silver badge3 bronze badges

Collectives™ on Stack Overflow

Parsing CSS files using RegEX

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related