JavaScript regexp parsing an array of URLs

Question

String

url(image1.png), url('image2.png'), url("image3.png")

Note the ' and " delimiters. It would be nice to handle them as well, but I'm happy if the first form is captured.

Result

var results = 'image1.png', 'image2.png', 'image3.png';

How?

I would like to use regular expressions in javascript to parse a string that is used as the CSS property of an element with multiple backgrounds. The aim is to get the url of the images that are put in the background of the element using CSS.

See more: http://www.css3.info/preview/multiple-backgrounds/

JSFiddle

http://jsfiddle.net/fcx9x59r/1/

georg · Accepted Answer · 2014-10-19 14:09:06Z

2

For this particular string [^'"()]+(?=['")]) seems to work fine:

css = "url(image1.png), url('image2.png'), url(\"image3.png\")";

m = css.match(/[^'"()]+(?=['")])/g)
document.write(m)

In the general case, you have to resort to a loop, because JS doesn't provide a way to return all matching groups from a single call:

css = "url(image1.png), something else, url('image2.png'), url(\"image3.png\")";

urls = []
css.replace(/url\(['"]*([^'")]+)/g, function(_, $1) { urls.push($1) });

document.write(urls)

edited Oct 19, 2014 at 14:09

answered Oct 19, 2014 at 12:03

georg

216k57 gold badges324 silver badges401 bronze badges

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

4 Comments

user663031 Over a year ago

I thought String.prototype.match exactly returns all matches (if the regexp has the g option).

AlexStack Over a year ago

It works but I didn't understand that (?=[ part. Can you explain a little more? Thanks.

Avinash Raj Over a year ago

@AlexStack is this the regex you want? It won't work in many cases. It would also match the string foo in "foo)

georg Over a year ago

@AlexStack: ?= is a lookahead. Basically, it reads "match ... when followed by...".

AlexStack · Accepted Answer · 2014-10-19 19:03:33Z

1

/url\(([^"']+?)\)|'([^'"]+?)'\)|"([^'"]+?)"\)/g

Try this.Grab the captures.See demo.

http://regex101.com/r/qQ3kG7/1

edited Oct 19, 2014 at 19:03

AlexStack

17.5k22 gold badges78 silver badges109 bronze badges

answered Oct 19, 2014 at 13:01

vks

68.1k11 gold badges96 silver badges132 bronze badges

2 Comments

AlexStack Over a year ago

I like your solution for its brevity and the use of Regex101 website. However this parses the following string url(image1.png), url('image2.png"), url('image3.png") too. Depends on how you look at it this can be a bug or a feature. Can we fix that?

AlexStack Over a year ago

Yes this last one is the best. Can you put that in your answer above?

Avinash Raj · Accepted Answer · 2014-10-19 09:58:10Z

1

You could try the below code also.

> var s = 'url(image1.png), url(\'image2.png\'), url("image3.png")';
undefined
> var re = /url\((["'])?((?:(?!\1).|[^'"])*?)\1\)/g;
undefined
> var matches = [];
undefined
> var m;
undefined
> while ((m = re.exec(s)) != null) {
......... matches.push(m[2]);
......... }
3
> console.log(matches)
[ 'image1.png', 'image2.png', 'image3.png' ]

DEMO

edited Oct 19, 2014 at 9:58

answered Oct 19, 2014 at 9:48

Avinash Raj

175k32 gold badges247 silver badges289 bronze badges

3 Comments

AlexStack Over a year ago

would be great to do all of it in just one regexp. (no while loop)

user663031 Over a year ago

Why do you need to do it in one regexp?

AlexStack Over a year ago

Because it's smaller and probably faster.

hindmost · Accepted Answer · 2014-10-19 12:14:58Z

1

Try this:

var results = str.match(/url\(['"]?[^\s'")]+['"]?\)/g)
.map(function(s) {
    return s.match(/url\(['"]?([^\s'")]+)['"]?\)/)[1];
});

Demo

edited Oct 19, 2014 at 12:14

answered Oct 19, 2014 at 9:28

hindmost

7,1713 gold badges33 silver badges42 bronze badges

Collectives™ on Stack Overflow

JavaScript regexp parsing an array of URLs

String

Result

How?

JSFiddle

4 Answers 4

4 Comments

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

String

Result

How?

JSFiddle

4 Answers 4

4 Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related