Javascript Regex - matching opening and closing parenthesis when nested

Question

I have a regex to grab background urls from css:

/(@import.*?)?url\(([^)]+)\)/gi

This works fine for most cases. However, css in the wild is another matter. Even though it is not valid, I need to match url('/pix/ajax/ajax-loader (2).gif'), as well as something more typical like url(/assets/[email protected]). I've tapped out my limited regex abilities and could use some help. The test cases I'm using are:

background: url('/pix/ajax/ajax-loader (2).gif')
background: url(/pix/ajax/ajax-loader (2).gif)
background: url(/assets/[email protected])
background: url('/assets/[email protected]')
background-image: url(file.gif);
background-image: url('file.gif') no-repeat;
background: #FF0000 url( "file.gif" ) no-repeat  ;
background: #FF0000 url( "file%20space.gif" ) no-repeat;

FYI i know regex is problematic and parsing with it is generally not the best solution, but in this case i'm stuck.

ceco · Accepted Answer · 2014-04-30 19:03:53Z

1

The following Regex machtes all your test cases:

 url\(.*\)

btw: regexpal is a good site to test your regex on the fly.

answered Apr 30, 2014 at 19:03

ceco

111 bronze badge

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

1 Comment

tenub Over a year ago

To clarify, the CSS must not be minified or contain multiple url(...) occurrences on the same line for this to work. RegEx does not work particularly well with nesting but in this case (and assuming properly formatted CSS), this should be the accepted solution.

Harsh Gupta · Accepted Answer · 2014-04-30 19:06:55Z

0

var regex = new RegExp(/^\s*background.*:.*url\((.+)\)/i);
console.log(regex.exec("background: url('/pix/ajax/ajax-loader (2).gif')")[1]);

HTH

answered Apr 30, 2014 at 19:06

Harsh Gupta

4,5582 gold badges28 silver badges31 bronze badges

Comments

JLRishe · Accepted Answer · 2014-04-30 19:18:50Z

0

This is very inelegant, but it should work to extract the URLs without the delimiters (i.e. without any single or double quotes):

url\((?:(?:\s*(?:'([^']+)'|"([^"]+)")\s*)|([^)]+))\)

You would extract any non-blank matches for groups $1, $2, or $3.

This works for all of your examples except this one:

background: url(/pix/ajax/ajax-loader (2).gif)

but for good reason, because that one has invalid syntax.

answered Apr 30, 2014 at 19:18

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Collectives™ on Stack Overflow

Javascript Regex - matching opening and closing parenthesis when nested

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related