如何找到所有.jpg，.png和.gif并使用JavaScript将它们列入网格？(How to find all .jpg, .png and .gif and list them into a g

如何找到所有.jpg，.png和.gif并使用JavaScript将它们列入网格？(How to find all .jpg, .png and .gif and list them into a grid with JavaScript?)

我想构建一个基本的书签 ，找到网页的所有.jpg，.png和.gif图像，并将它们列入网格。 （例如，连续4张图片）我刚刚找到了这个片段，但无论扩展名如何，它都会推送所有图片：

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

怎么做？

I would like to build a basic bookmarklet that finds all .jpg, .png and .gif images of a web page and list them into a grid. (e.g. 4 images in a row) I just found this snippet but it pushes all image no matter of the extension:

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

How to do it?

最满意答案

您可以使用querySelectorAll并使用正则表达式来获取具有扩展名的图像：

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); }

要生成您可以执行的图像列表：

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

您必须添加一些CSS才能使其成为网格。

You could use the querySelectorAll and use a regular expression to get the images with the 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); }

To generate a list of images you could do:

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

You have to add some CSS to make it a grid.