Regex to match url()'s in inline styles

Question

Should work everywhere :)

But especially those I find tricky:

<div style="background-image:url('img.png');"></div>
<div style='background-image:url("img.png");'></div>
<div style='background-image:url(img.png);'></div>
<div style='background-image:url(../../img.png);'></div>
<div style='background:  #ffffff   url( "img.png" )   no-repeat right top;'></div>

Note: should work in JavaScript.

GetSet · Accepted Answer · 2012-03-15T17:26:50.890

1

If you want anything inside every url(...)

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

url    # literal characters 
\(     # escaped left parenthesis to treat it as literal
\s*    # 0 or more white-space characters
(      # 1st capture group
 ['"]? # either ' or " or neither
)      # end 1st capture group
(.*?)  # 2nd (main) capture group, any characters, reluctantly
\1     # back-reference group #1, to ensure that same quote type is used at end
\s*    # 0 or more white-space characters
\)     # escaped right parenthesis to treat it as literal

http://rubular.com/r/P6FJwxC0L7

If you want only .png files inside every url(....png)

url\(\s*(['"]?)(.*?\.png)\1\s*\)

EDIT: allowance for spaces, and removed useless back-reference

edited Mar 15 '12 at 17:26

answered Mar 15 '12 at 16:45

GetSet

534
2
6

Thanks! Can you check the fifth example, with the additional spaces? – Aron Woost Mar 15 '12 at 16:58
Edited to handle your 5th test – GetSet Mar 15 '12 at 17:22

score 0 · Answer 2 · answered Mar 15 '12 at 16:32

I think you should get the inner text of the style attribute somehow, and then use the following regex:

background-image:(?: )*url\((?:'|")?([^'"]*)(?:'|")?\);

The only matched group will be the contents of background-image's url, without optional leading and/or trailing quotes (either " or ')

score 0 · Answer 3 · edited Mar 15 '12 at 18:17

0

This should work \\(['"]?([\w./]+)

edited Mar 15 '12 at 18:17

Oleks

31,955
11
77
132

answered Mar 15 '12 at 16:33

user489998

4,473
2
29
35

score 0 · Answer 4 · edited Mar 15 '12 at 18:17

Another way to go would be to anchor the start of the match after url( and possible spaces or quote, \burl\( *['"]? and match everything that follows until you find a space, quote, or closed parenthesis ([^'" )]+).

var txt='url("/webworks/art/yankee/yankee2.gif")';
var url=(/\burl\( *['"]?([^'" )]+)/.exec(txt)||[])[1];

url>>
/webworks/art/yankee/yankee2.gif

written with `|| []`` at the end allows a non-match to return undefined rather than throwing an error.

score 0 · Answer 5 · answered Mar 15 '12 at 18:11

I'd match urls by a simple pattern first /url\([^(]+\)/ig, and then remove all the unnecessary symbols from the result:

var matches = html.match(/url\([^(]+\)/ig);
for(var i = 0; i < matches.length; i++)
    // this is a clean url
    var url = matches[i].replace(/(^url\s*\(\s*['"]?)|(['"]?\s*\)$)/ig, '');

You could find the full code snippet on jsfiddle.

Regex to match url()'s in inline styles

5 Answers5