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 = \"

        

Answer 1

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.

Answer 2

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]

Answer 3

I solved it by using this regex.

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

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

Answer 4

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

Answer 5

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

Answer 6

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.