Regex for retrieving the parameter of the CSS url function

Question

I'm trying to get the url portion of the following string:

url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)

So the required part if images/ui-bg_highlight-soft_75_cccccc_1x100.png.

Currently I've got this:

url\((?<url>.*)\)

But it seems to be choking on the following example:

url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30)

Which results in images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30...

I'd like to make sure that it supports as many variations as possible (additional whitespace etc).

Thanks!
Kieron

Edit

Additionally, I need to ignore the optional quotes ' or " ...

Now, it looks like this:

url\(['|"]?(?<url>[^)]+)\)

I can't seem to get it to stop/ ignore the last quote...

Paul Creasey · Accepted Answer · 2010-06-07 23:19:41Z

6

This is due to the greediness of the * quantifier, try a negated character class instead of a .

url\((?<url>[^)]*)\)

or you could use the lazy operator

url\((?<url>.*?)\)

First choice is proabably better.

Edit: To ignore the second quote, you will want to use the lazy quantifier like this

url\(['"]?(?<url>[^)]+?)['"]?\)

You don't use the alternation meta character | within a character class.

edited Jun 7, 2010 at 23:19

answered Jun 7, 2010 at 22:54

Paul Creasey

28.9k10 gold badges59 silver badges91 bronze badges

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

4 Comments

Kieron Over a year ago

I thought it would be something like that, reg-ex is one of those things that I have to re-learn every time I use it - even if it's been 10mins since I last did any. Thanks for the help.

zerkms Over a year ago

@Kieron: once you decide to solve trouble with regex - you have 2 troubles ;-)

Paul Creasey Over a year ago

Updated, Regex is great really, just so often abused and misunderstood!

zerkms Over a year ago

>> To ignore the second quote --- just put another char to excluding set [^\)']

zerkms · Accepted Answer · 2010-06-07 22:52:09Z

1

Replace .* with [^\)]+

answered Jun 7, 2010 at 22:52

zerkms

256k73 gold badges447 silver badges551 bronze badges

Comments

Alan Moore · Accepted Answer · 2010-06-07 23:28:47Z

1

This should do it:

url\(['"]?(?<url>.*?)['"]?\)

But you might want to allow for optional whitespace:

url\s*\(['"\s]*(?<url>.*?)['"\s]*\)

That will also match some invalid strings, but that shouldn't be a problem if your CSS is valid.

On more thing: that | in ['|"] does not act as an OR operator, it just matches a literal |. OR is implicit in character classes.

answered Jun 7, 2010 at 23:28

Alan Moore

75.6k13 gold badges109 silver badges161 bronze badges

Comments

bluish · Accepted Answer · 2012-01-27 08:29:41Z

0

~~url\((.*\.png)~~

url\\((.[^)]*)\\)

edited Jan 27, 2012 at 8:29

bluish

27.5k28 gold badges126 silver badges185 bronze badges

answered Jun 7, 2010 at 23:00

bergin

1,6142 gold badges15 silver badges21 bronze badges

Collectives™ on Stack Overflow

Regex for retrieving the parameter of the CSS url function

Edit

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related