Which regular expression matches all occurrences of css addresses?

Question

I have a css file with a set of background image urls:

.alert-01 { background: url('img/alert-01.jpg') center no-repeat; } .alert-02 { background: url('img/alert-02.jpg') center no-repeat; } .alert-03 { background: url('img/alert-03.jpg') center no-repeat; } .alert-04 { background: url('img/alert-04.jpg') center no-repeat; } 

And I would like to write a regex that strips the URL.

So, initially I would get:

 url('img/alert-01.jpg') url('img/alert-02.jpg') url('img/alert-03.jpg') url('img/alert-04.jpg') 

Why could I replace the bits to turn them into html <img> .

I'm fine with the last bit, but my regex skills are a little rusty.

My last attempt: /^url\(.*?g\)$/ig

Any help?

By the way, I did all this in javascript, but the language should not affect the regular expression.

Thanks in advance!

Also, just to mention, I cannot guarantee that the files will always be jpg and can be jpeg, png, etc. Also, that the arguments in the background will always be the same. Therefore, why I want to extract only part of the url.

Answer 1

Try:

 /url\(.*?g'\)/ig 

Your error included ^ and $ in regexp, which binds it to the beginning and end of the input line. And you forgot to give a quote.

Answer 2

Using a tool like Regexper , we can see what matches your regular expression:

As you can see, there are several problems with this:

• It is assumed that "url (" is at the beginning of the line.
• The content is supposed to end with "g" ", while all your examples end with" g ").
• This assumes that after "g" "this is the end of the line.

Instead, we only need to combine "url(" [any character] ")" . And we can do this using:

 /url\(.*?\)/ig 

Please note that I removed the requirement for a URL ending in "g" in case the image type is .gif or any other non-jpg, jpeg or png.

---

Edit: as Seçkin M commented below: what if we don't want any other URLs; such as fonts that have .ttf or .eot? What is the easiest way to define a group of allowed extensions?

To do this, we can determine which extensions we are looking for by placing our extensions in brackets, separated by | . For example, if we want to match only gif , png , jpg or jpeg , we could use:

 /url\(.*?(gif|png|jpg|jpeg)\'\)/ig 

Answer 3

Use the following regular expression:

 /\burl\([^)]+\)/gi 

There is no need to use bindings ( ^ and $ ), as they limit the match across the entire input of the string and therefore fail. To capture the image path separately so that you can easily use it (and avoid substring) when creating <img> tags, use:

 /\burl\('([^']+)'\)/gi 

This captures img/alert-xx.jpg in the first group.

Answer 4

 /^url\((['"]?)(.*)\1\)$/ 

with jQuery:

 var bg = $('.my_element').css('background-image'); // or pure js like element.style.backgroundImage bg = /^url\((['"]?)(.*)\1\)$/.exec(bg); bg = bg ? bg[2] : false; if(bg) { // Do something } 

Crossroads with Chrome / Firefox

http://jsfiddle.net/KFWWv/

Answer 5

I came to this question from Google. Old but none of the answers discuss data: image / * urls. Here is what I found in another Google result that will only match http or relative URLs.

 /url\((?!['"]?(?:data):)['"]?([^'"\)]*)['"]?\)/g 

Hope this helps other people coming from search engines.

Answer 6

You just didn't take into account the final quote.

  url \ (. * g \ '\)

and binding