Question

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

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

怎么做？

Answer 1

您可以使用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才能使它成为网格。

Answer 2

简单的方法是过滤数组

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

顺便说一句，使用querySelectedAll是一个更优雅的解决方案，如评论中提到的那样。

如何找到所有.jpg，.png和.gif并使用JavaScript将它们列入网格？

2 个答案: