js code to fetch all gif images from a webpage

Question

I was trying to get all the images from a webpage and display them in the console log Code below:

function img_find() 
{
    var imgs = document.getElementsByTagName("img");
    var imgSrcs = [];
    for (var i = 0; i < imgs.length; i++){
      imgSrcs.push(imgs[i].src);
      console.log(imgs[i].src);
    }`
    return imgSrcs;
}

But now I just want to get gif images only. How can I do that?

Side note, just check your additional ` on line 8. – Daniel ZA Nov 05 '20 at 12:24 — Daniel ZA, Nov 05 '20 at 12:24

Hackinet · Answer 1 · 2020-11-05T12:48:32.933

function img_find() {
var images = document.getElementsByTagName('img'); 
var srcList = [];
for(var i = 0; i < images.length; i++) {
    if(!!(images[i].src).match(/\w+\.(gif)$/gi))
        srcList.push(images[i].src);
}

console.log(srcList);
}

You must be wondering as to why I used !! (double not operator) in the if condition. You can read about it here, they explained it better than I could: What is the !! (not not) operator in JavaScript?

score 0 · Answer 2 · answered Nov 05 '20 at 12:24

You can split and compare the extension in the src , here is how it's done (with regex).

function img_find() 
{
    var imgs = document.getElementsByTagName("img");
    var imgSrcs = [];
    for (var i = 0; i < imgs.length; i++){
      if (imgs[i].src.toLocaleLowerCase().split(/\.(?=[^\.]+$)/) == "gif"){
          imgSrcs.push(imgs[i].src);
      }          
      console.log(imgs[i].src);
    }
    return imgSrcs;
}

js code to fetch all gif images from a webpage

2 Answers2