regex extract img src javascript

Question

I am trying to extract the img and src from a long html string.

I know there are a lot of questions about how to do this, but I have tried and gotten the wrong result. My question is just about contradicting results though.

I am using:

var url = "<img height=\"100\" src=\"data:image/png;base64,testurlhere\" width=\"200\"></img>";
var regexp = /<img[^>]+src\s*=\s*['"]([^'"]+)['"][^>]*>/g;
var src = url.match(regexp);

But this results in src not being extracted properly. I keep getting src =<img height="100" src="data:image/png;base64,testurlhere" width="200"></img> instead of data:image/png;base64,testurlhere

However, when I try this on the regex tester at regex101, it extracts the src correctly. What am I doing wrong? Is match() the wrong function to use>

http://stackoverflow.com/questions/590747/using-regular-expressions-to-parse-html-why-not — epascarello, Jul 22 '15 at 04:19

Vi0nik · Answer 1 · 2020-06-24T13:04:04.130

16

If you need to get the whole img tags for some reason:

const imgTags = html.match(/<img [^>]*src="[^"]*"[^>]*>/gm);

then you can extract the source link for every img tag in array like this:

const sources = html.match(/<img [^>]*src="[^"]*"[^>]*>/gm)
                          .map(x => x.replace(/.*src="([^"]*)".*/, '$1'));

edited Jun 24 '20 at 13:04

answered May 20 '17 at 12:18

Vi0nik

171
1
8

Thanks for this, exactly what I needed :D – nbsp Jul 13 '18 at 00:42
@nbsp Glad it helped someone! :) – Vi0nik Jul 17 '18 at 10:43
This is exactly what I was looking for! Cheers. – coderpc Dec 05 '19 at 18:14
Perfect! You just forgot a closed bracket on the very last line – Philipp Mochine Jun 23 '20 at 09:12
@Shadrix It's added. Thank you! – Vi0nik Jun 24 '20 at 13:04
Exactly what I needed too – ßiansor Å. Ålmerol Dec 31 '20 at 14:05

score 3 · Accepted Answer · answered Jul 22 '15 at 04:16

Not a big fan of using regex to parse html content, so here goes the longer way

var url = "<img height=\"100\" src=\"data:image/png;base64,testurlhere\" width=\"200\"></img>";
var tmp = document.createElement('div');
tmp.innerHTML = url;
var src = tmp.querySelector('img').getAttribute('src');
snippet.log(src)

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

OP, I gave you the literal answer to your question; but this here is what you would be advised to be doing instead. — Amadan, Jul 22 '15 at 04:27

score 1 · Answer 3 · answered Jul 22 '15 at 04:14

1

Try this:

var match = regexp.exec(url);
var src = match[1];

answered Jul 22 '15 at 04:14

Amadan

179,482
20
216
275

Thanks, this works too. Just wondering, why does match[0] return the original string and match[1] return the substring that we are actually looking for? Is it always the case that the 2nd element in the resulting array will be the desired result? – llams48 Jul 23 '15 at 03:35
@llams48: `match[1]` is the 1st capture group, `match[2]` is the second... and `match[0]` is the full match. – Amadan Jul 23 '15 at 03:44

regex extract img src javascript

3 Answers3

Linked

Related