Javascript regular expressions. Getting the image src

Question

I have the variable below:

myvar = '<img src=".images/myimage.jpg"/>';

How can i get only the ".images/myimage.jpg" in a variable using regular expressions?

why with regular expression?? you can do it using a substring. I can show you how do it if you want — gon250
– gon250, Commented Mar 13, 2015 at 12:42

Daniel A. White · Accepted Answer · 2015-03-13 12:41:15Z

11

No need for a regex which could be problematic.

var src = $(myvar).attr('src');

answered Mar 13, 2015 at 12:41

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

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

2 Comments

Erik Schierboom Over a year ago

This is the correct answer. Under the hood, what happens is that the $ function parses the HTML string to build a DOM element. You then retrieve its src attribute. The main benefit of this approach is that it is guaranteed to correctly parse the HTML.

Karl-André Gagnon Over a year ago

@SalmanA You're right, having the Vanilla JS option as an answer might be good for other readers

Community · Accepted Answer · 2017-05-23 12:12:57Z

Using Regular Expression is not the way to go, you should instead parse the HTML.

You could use jQuery, to parse rapidly the HTML and then the src attribute. This other answer is good and you should use that if jQuery is loaded.

Nonetheless, if jQuery is not loaded, you should not load it just for that.

If you want to get the src property or attribute (they are not the same) you can create a div and insert you HTML string into it. You will then be able to traverse the DOM and get the image src.

var wrapper = document.createElement('div');
wrapper.innerHTML = '<img src=".images/myimage.jpg"/>';
var img = wrapper.querySelector('img');

console.log(img.src);
console.log(img.getAttribute('src'));

Note that this snippet assume there will always be an image in the string. There is no condition to prevent error (but are easy to do).

See it in action here.

Collectives™ on Stack Overflow

Javascript regular expressions. Getting the image src

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related