Regular expression for finding image urls in <img> tag in HTML using javascript

Question

What is the faster way to collect in an array srcs urls from image tag?

var result = [];
var html= '<img src="http://mysite.com/a/b/c/images/aaa.jpg"><img src="http://mysite.com/a/b/c/images/bbb.jpg"><img src="http://mysite.com/a/b/c/images/ccc.jpg">'

so the result should be in listed in the array as:

http://mysite.com/a/b/c/images/aaa.jpg
http://mysite.com/a/b/c/images/bbb.jpg
http://mysite.com/a/b/c/images/ccc.jpg

Can you guaraantee they'll all be in the exact same form? I'm sure you're well awware that regex isn't suitably equipped for HTML parsing. At any rate, in this form you could just match anything between quotes. — Gary
– Gary, Commented Sep 18, 2013 at 12:16

Niet the Dark Absol · Accepted Answer · 2013-09-18 12:12:31Z

5

Don't try to parse the string yourself:

var tmp = document.createElement('div');
tmp.innerHTML = html;
var imgs = tmp.getElementsByTagName('img'), l = imgs.length, i;
for( i=0; i<l; i++) result[i] = imgs[i].src;

answered Sep 18, 2013 at 12:12

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

Comments

hsz · Accepted Answer · 2013-09-18 12:11:58Z

2

Using jQuery:

var result = [];
var html   = '<img src="http://mysite.com/a/b/c/images/aaa.jpg"><img src="http://mysite.com/a/b/c/images/bbb.jpg"><img src="http://mysite.com/a/b/c/images/ccc.jpg">';

$(html).each(function(){
  result.push($(this).attr('src'));
});

answered Sep 18, 2013 at 12:11

hsz

153k63 gold badges268 silver badges320 bronze badges

3 Comments

Niet the Dark Absol Over a year ago

Do you see a jQuery tag anywhere?

hsz Over a year ago

@Kolink Did you use regex ?

Niet the Dark Absol Over a year ago

@GibboK Neither. See my answer for the best solution to this problem.

Collectives™ on Stack Overflow

Regular expression for finding image urls in <img> tag in HTML using javascript

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related