Regular Expression to extract src attribute from img tag

Question

I am trying to write a pattern for extracting the path for files found in img tags in HTML.

String string = "<img src=\"file:/C:/Documents and Settings/elundqvist/My Documents/My Pictures/import dialog step 1.JPG\" border=\"0\" />";

My Pattern:

src\\s*=\\s*\"(.+)\"

Problem is that my pattern will also include the 'border="0" part of the img tag.

What pattern would match the URI path for this file without including the 'border="0"?

score 48 · Accepted Answer · answered Jan 16 '09 at 11:22

48

Your pattern should be (unescaped):

src\s*=\s*"(.+?)"

The important part is the added question mark that matches the group as few times as possible

answered Jan 16 '09 at 11:22

Sebastian Dietz

5,587
1
31
39

what about single quotes in src – Sourabh Somani Jul 04 '19 at 12:19

score 18 · Answer 2 · answered Feb 21 '14 at 23:46

18

This one only grabs the src only if it's inside of an tag and not when it is written anywhere else as plain text. It also checks if you've added other attributes before or after the src attribute.

Also, it determines whether you're using single (') or double (") quotes.

\<img.+src\=(?:\"|\')(.+?)(?:\"|\')(?:.+?)\>

So for PHP you would do:

preg_match("/\<img.+src\=(?:\"|\')(.+?)(?:\"|\')(?:.+?)\>/", $string, $matches);
echo "$matches[1]";

for JavaScript you would do:

var match = text.match(/\<img.+src\=(?:\"|\')(.+?)(?:\"|\')(?:.+?)\>/)
alert(match[1]);

Hopefully that helps.

answered Feb 21 '14 at 23:46

Alfonse

732
1
6
7

2

This regex will NOT work if the ending of `src` tag has is last and stuck to the closing of img tag. For example: `` <=== will not work – Muhammad Reda Dec 14 '21 at 19:55
To enable this regex for tags like ``, it can be fixed by replacing `+` with `*` in the last group: `/\/` – kernelpicnic Apr 25 '23 at 08:40

score 10 · Answer 3 · edited Dec 22 '16 at 17:18

10

Try this expression:

src\s*=\s*"([^"]+)"

edited Dec 22 '16 at 17:18

mjk

2,443
4
33
33

answered Jan 16 '09 at 11:19

Gumbo

643,351
109
780
844

score 7 · Answer 4 · answered Jul 26 '19 at 15:48

7

I solved it by using this regex.

/<img.*?src="(.*?)"/g

Validated in https://regex101.com/r/aVBUOo/1

answered Jul 26 '19 at 15:48

Naveen Murthy

3,661
2
21
22

score 0 · Answer 5 · answered Mar 04 '16 at 12:59

0

I'd like to expand on this topic as usually the src attribute comes unquoted so the regex to take the quoted and unquoted src attribute is:
src\s*=\s*"?(.+?)["|\s]

answered Mar 04 '16 at 12:59

Brlja

364
3
14

score 0 · Answer 6 · answered Jan 16 '09 at 11:22

0

You want to play with the greedy form of group-capture. Something like

src\\s*=\\s*\"(.+)?\"

By default the regex will try and match as much as possible

answered Jan 16 '09 at 11:22

oxbow_lakes

133,303
56
317
449

You need to put the question mark inside the parens, like Sebastian did. – Alan Moore Jan 16 '09 at 17:51

score 0 · Answer 7 · answered Jan 16 '09 at 12:37

I am trying to write a pattern for extracting the path for files found in img tags in HTML.

Can we have an autoresponder for "Don't use regex to parse [X]HTML"?

Problem is that my pattern will also include the 'border="0" part of the img tag.

Not to mention any time 'src="' appears in plain text!

If you know in advance the exact format of the HTML you're going to be parsing (eg. because you generated it yourself), you can get away with it. But otherwise, regex is entirely the wrong tool for the job.

Regular Expression to extract src attribute from img tag

7 Answers7

Linked