Comment trouver tous les fichiers .jpg, .png et .gif et les lister dans une grille avec JavaScript?

Question

Je voudrais construire un bookmarklet de base qui trouve toutes les images .jpg, .png et .gif d'une page Web et les lister dans une grille. (par exemple 4 images dans une rangée) Je viens de découvrir cet extrait, mais il pousse image peu importe l'extension:

var images = document.getElementsByTagName('img'); 
var srcList = []; 
for(var i = 0; i < images.length; i++) { 
    srcList.push(images[i].src); 
} 

Comment le faire?

Answer 1

Vous pouvez utiliser le querySelectorAll et utiliser une expression régulière pour obtenir les images avec les extensions:

var images = document.querySelectorAll('img[src$=".jpg"], img[src$=".png"], img[src$=".gif"]'); 
var srcList = []; 
for(var i = 0; i < images.length; i++) { 
    srcList.push(images[i].src); 
} 

Pour générer une liste d'images que vous pouvez faire:

for(var i = 0; i < images.length; i++) { 
    var img = document.createElement('img'); 
    img.src = images[i].src; 
    document.body.appendChild(img); 
} 

Vous devez ajouter du CSS pour en faire une grille.

Answer 2

Une façon simple est de filtrer le tableau

var images = document.getElementsByTagName('img'); 
    var srcList = []; 
    for (var i = 0; i < images.length; i++) { 
     var im = images[i]; 
     var src = im.src; 
     var ext = src.substring(lastIndexOf('.')); 
     if (ext == '.jpg' || ext == '.png' || ext == '.gif') { 
      srcList.push(images[i].src); 
     } 
    } 

Par ailleurs, en utilisant querySelectedAll est loin solution plus élégante comme mentionné dans les commentaires ..