Regex to find image src/path from attribute

Question

if my html is

<div style="background-image: url(http://domain.com/randompath/random4509324041123213.jpg);"></div>

And I get style attribute like..

var img_src = $('div').css('background-image');

So output is

url("http://domain.com/randompath/random4509324041123213.jpg")

Any regex or some basic thing to find image src/path 100% ? like

http://domain.com/randompath/random4509324041123213.jpg

100% I mean cross browser, It should work 100%

I not sure about output from var img_src = $('div').css('background-image'); has pattern like this in all browsers , If "yes" so I can do .replace()function

Playground : http://jsbin.com/apalat/1/edit

Why would you need a regex for this? Why not just fetch the element's background-image property? — Pekka
– Pekka, Commented Mar 14, 2013 at 11:20
Sorry sorry Edited , I want pure image src like http://domain.com/randompath/random4509324041123213.jpg @Pekka웃 — l2aelba
– l2aelba, Commented Mar 14, 2013 at 11:20
Can you guarantee that someone has not written background-image: url('http://domain.com/randompath/random4509324041123213.jpg');" with the URL surrounded by quotes? It is valid CSS to have quotes around a URL - they are optional in the specification. — andyb
– andyb, Commented Mar 14, 2013 at 13:55

Jai · Accepted Answer · 2013-03-14 16:20:16Z

3

Try this one:

$("code").html(img_src.slice(5, -2));

CHECKOUT FIDDLE

Update:

For 'chrome' because chrome doesn't add '"' quotes:

var img_src = $('div').css('background-image');

$("code").html(img_src.slice(5, -2));

if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0) {
   $("code").html(img_src.slice(4, -1));
}

UPDATED FIDDLE

edited Mar 14, 2013 at 16:20

answered Mar 14, 2013 at 11:23

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

7 Comments

l2aelba Over a year ago

Is my img_src will output like url("http://domain.com/randompath/random4509324041123213.jpg") in all browsers right ?

Jai Over a year ago

Oh yes yes. This seems to be.

andyb Over a year ago

In Chrome 23, your fiddle shows ttp://domain.com/randompath/random4509324041123213.jp as output.

l2aelba Over a year ago

Yes in chrome will show url(http://domain.com/randompath/random4509324041123213.jpg)

andyb Over a year ago

Because in Firefox img_src = url("http://domain.com/randompath/random4509324041123213.jpg") (Firefox added some quotes) and in Chrome it is url(http://domain.com/randompath/random4509324041123213.jpg) so the slicing is wrong

|

apelsinapa · Accepted Answer · 2013-03-14 11:26:10Z

1

Don't need regex, just cut the string...

http://jsfiddle.net/BHcsQ/2/

var s = 'url("http://domain.com/randompath/random4509324041123213.jpg")';
var s_sub = s.substring(5, s.length-2);

alert(s_sub);

answered Mar 14, 2013 at 11:26

apelsinapa

5853 silver badges9 bronze badges

Collectives™ on Stack Overflow

Regex to find image src/path from attribute

2 Answers 2

CHECKOUT FIDDLE

Update:

UPDATED FIDDLE

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update:

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related