[例]简单脚本提取页面中所有图片地址(实现、改进、实战)

需求场景

批量下载网页中的图片是比较普遍的需求,实现上也并不复杂,只要找到页面中的图片地址,粘贴到下载器中批量下载即可。如IDM批量下载:


实现

实现过程主要是在图片集合中抽取图片地址(src属性)集合。

  • 图片集合(Dom节点列表,类数组的集合)
  • 图片地址集合(标准数组)

虽然图片集合是类数组,但并没有JavaScript数组方法,所以没办法用隐式迭代的方法,只能显示的写for或while循环语句。

// 获取图片集合
var images = document.querySelectorAll("img");

// 创建图片地址集合
var images_src = [];

// 遍历得到图片地址
for (var i = images.length - 1; i >= 0; i--) {
images_src.push(images[i].src);
}

// 连接数组
console.log(images_src.join('\n'));

 


改进

由于ES5、ES6的普及,ES5 数组增加几个隐式迭代方法(Array.map|filter|reduce|forEach|…),ES6 增加类数组转换成数组Array.from、箭头函数等。

Array.prototype.map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

// 获取图片集合
let images = document.querySelectorAll("img");

// 转化成数组
let images_array = Array.from(images);

// 隐式迭代得到图片地址并连接
images_array.map(img => img.src).join("\n");

 


实战

请将该页面(https://m.weibo.cn/detail/4294751458437685)中评论中的图片(大图)下载下来。

  • 滚动页面以便加载更多评论。
  • 在控制台或通过油猴脚本(TamperMonkey)注入代码:

// 获取图片集合
let images = document.querySelectorAll(".comment-con-img img");

// 转化成数组
let images_array = Array.from(images);

// 隐式迭代得到图片地址并连接
images_array.map(img => img.src.replace('orj360','large')).join("\n");

 


关注微信公众号

码中人 微信公众号