Regex is not parsing out my image url

Question

My code seems to be returning a null value for my image url. I would like to get just the link, but it does not seem to work.

Here is my code:

var image_url = jQuery('#bgImgWrap').css('background'), image;

// Remove url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);

Here is what it returns right after the image_url is declared:

Image: rgb(255, 255, 255) 
 url(http://localhost:8000/mysite/images/Our_Services2.jpg) 
no-repeat scroll 0% 0% / cover padding-box border-box

Here is what is returned after my regex is used:

Image: null

I am not that great with regex, but i was wondering if someone would be able to help me accomplish getting the correct background image url that i need? Thank you!

Generally speaking, when writing a regex, "active-tester" tools tend to help me, constantly highlighting in sample data what your regex will match. One I use is Regexpal.com — Katana314
– Katana314, Commented Apr 25, 2014 at 17:24
@MikeSamuel Actually, no, that appears to be optional based on the ?s afterward. — Katana314
– Katana314, Commented Apr 25, 2014 at 17:28

Shiplu Mokaddim · Accepted Answer · 2014-04-25 17:27:28Z

2

^ and $ in your regex /^url$"?(.+?)"?$$/ makes it impossible to match. These metacharacter tells regex engine to match from beginning and ending respectively. But your url is not anchored at beginning or end. The correct regex would be.

/url\([^)]+\)/

also note .match will return an array of matched texts. So you need to access them by index.

image_url = image_url.match(/url\([^)]+\)/)[0];

answered Apr 25, 2014 at 17:27

Shiplu Mokaddim

57.5k20 gold badges147 silver badges193 bronze badges

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

Comments

Katana314 · Accepted Answer · 2014-04-25 17:31:39Z

0

I think this issue has to do with the ^ and $ in your regex. You're testing it against a long several-line string that has your query in the middle, so you may want to just remove those.

IF you do want to be sure the result is on its own line, add \s* just after the ^, and before the $, so that you can account for some whitespace. (\s is whitespace, * means 0-any). You will also need to add an m after the final /, to specify that the regex should count those characters as "begin/end line", not "begin/end string"

So, the end regex, I believe, would be:

/^\s*url\(("?(.+?)"?\)\s*$/m

answered Apr 25, 2014 at 17:31

Katana314

8,6052 gold badges31 silver badges36 bronze badges

Collectives™ on Stack Overflow

Regex is not parsing out my image url

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related