Use regex to get image URL in HTML/Js

Question

I want to get some URLs of images in Js/HTML:

var a = "http://sub.domain.com/uploads/files/11-11-2011/345301-574-1182-393/2202.jpg";
var b = "http://sub.domain.com/uploads/files/23-11-2011/234552-574-2321-232/asd.png";

Looking for solution that will detect image url. So the output will be:

http://sub.domain.com/uploads/files/11-11-2011/345301-574-1182-393/2202.jpg
http://sub.domain.com/uploads/files/23-11-2011/234552-574-2321-232/asd.png

Thanks!

Just to be clear: You want to scan an entire HTML source file that also contains JavaScript for URL strings in the JavaScript sections? — Tomalak
– Tomalak, Commented Nov 4, 2010 at 15:46

tinifni · Accepted Answer · 2010-11-04 16:08:24Z

42

Based off the information you've given, this should work:

(https?:\/\/.*\.(?:png|jpg))

You can add more extensions by adding |ext after jpg. This will allow for strings with https as well.

Note: You may want to use the case insensitive modifier i to make the capture more inclusive. This would look like:

/(https?:\/\/.*\.(?:png|jpg))/i

edited Nov 4, 2010 at 16:08

answered Nov 4, 2010 at 15:51

tinifni

2,40219 silver badges15 bronze badges

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

5 Comments

Amarsh Over a year ago

This will fail in situations like src="mail.google.com/mail/u/0/images/cleardot.gif" style="background:url(ssl.gstatic.com/mail/sprites/…) . What works for me is (https?:\/\/[^ ]*\.(?:gif|png|jpg|jpeg))

hayatbiralem Over a year ago

I think this is better: (http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|png|svg))

singe batteur Over a year ago

yeah +1 : for example : someurl.svg.png (wiki eg.)

jave.web Over a year ago

Altough @Amarsh is right, OP asked for URL, not a generic path, but URL (which I believe is required to have scheme (e.g. http: ))

jave.web Over a year ago

If you already have <img ...> tag parsed out and want to get the src no matter what it contains, this worked for me /src\W*=[^\'"]*([\'"])([^\1]*?)\1/ - ? after * means "non-greedy", \W means non-word characters and \1 is referencing the first defined group. Don't use + instead of * to get only non-empty - might not work if <img ...> has more attributes!

Nathan Lippi · Accepted Answer · 2012-05-04 19:21:27Z

12

A little late to the party, but in trying to do something similar to the OP, I created the following regex, which seems to handle relative links as well as absolute ones:

/([a-z\-_0-9\/\:\.]*\.(jpg|jpeg|png|gif))/i

answered May 4, 2012 at 19:21

Nathan Lippi

5,2775 gold badges27 silver badges30 bronze badges

2 Comments

Rafa Nogales Over a year ago

This allows extract only urls, if they are mixed with other text (very useful when you're scraping)

Aydin K. Over a year ago

this does not extract filenames completely having spaces inside

JDXN.xyz · Accepted Answer · 2021-05-26 20:33:20Z

6

I created this regex a few days ago:

/^https?:\/\/.*\/.*\.(png|gif|webp|jpeg|jpg)\??.*$/gmi

The ones provided by others in this post work, but will not check for query strings

Example of this regex:

  static checkForImage(url){
    let regex = /^https?:\/\/.*\/.*\.(png|gif|webp|jpeg|jpg)\??.*$/gmi
    let result;
    if (url.match(regex)){
      result = {
        match: url.match(regex)
      }
    } else {
      result = false;
    }
    return result;
  }
checkForImage('https://images-ext-2.discordapp.net/external/yhycJKw8ohsysnU6CBDLQPV4979oQINVmv-fRfu-jL8/%3Fsize%3D2048/https/cdn.discordapp.com/avatars/490535372393021469/a_9e9d0e575eee0221e759257e259681af.gif')

answered May 26, 2021 at 20:33

JDXN.xyz

591 silver badge2 bronze badges

1 Comment

janechii Over a year ago

Your code won't work as you expected, I'm afraid. For example, it'll match something like https://foo.bar/a.jpg.pdf as well or really any character after a specified extension will be a matched. I'm not regex guru, but maybe something like this will do: ^https?:\/\/.*\/.*\.(png|gif|webp|jpeg|jpg)($|\?.*$). You may also want to consider adding uri fragment # as a condition too.

thejh · Accepted Answer · 2010-11-04 15:48:05Z

3

Try this:

/"(http://[^"]*?\.(jpg|png))"/g

$1 is what you want.

answered Nov 4, 2010 at 15:48

thejh

45.7k18 gold badges100 silver badges109 bronze badges

Comments

Snorch · Accepted Answer · 2021-05-25 19:07:44Z

2

A super strict solution to this would be:

/(http[s]*:\/\/)([a-z\-_0-9\/.]+)\.([a-z.]{2,3})\/([a-z0-9\-_\/._~:?#\[\]@!$&'()*+,;=%]*)([a-z0-9]+\.)(jpg|jpeg|png)/i

edited May 25, 2021 at 19:07

answered May 12, 2021 at 13:23

Snorch

214 bronze badges

3 Comments

shaedrich Over a year ago

Why (http[s]*://)? Is there anything else besides an s that can be appended to http? oO

Snorch Over a year ago

It's because some services misbehave if you access them via https when they don't support it, or vice versa. I have encountered instances where changing the protocol solved my issue. In any case, it was to give a different approach to other answers as well.

shaedrich Over a year ago

I know, that some services only have http, others might only have https. Oh, I see, you just use the * instead of the ? which would be a little more intentional.

shaedrich · Accepted Answer · 2021-05-13 07:00:48Z

-1

var regex = /(http[s]?:\/\/.*\.(?:png|jpg|gif|svg|jpeg))/i;

This is the result you want

edited May 13, 2021 at 7:00

shaedrich

5,7633 gold badges31 silver badges47 bronze badges

answered Apr 20, 2016 at 2:39

zhang ying

1

Collectives™ on Stack Overflow

Use regex to get image URL in HTML/Js

6 Answers 6

5 Comments

2 Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

2 Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related