JS正则获取HTML所有img的链接

由于html每个字符的组成是任意的,要找到img元素的位置只需直接匹配到img的标签<img

/<img/

同时img标签里可以有多个属性,src属性出现位置也是不固定的,所以得用非贪婪模式*?(向后最近匹配)来匹配到src的位置上,中间的字符用.(匹配除换行符的任意字符)来匹配

/<img.*?src=/

注意 url 可能使用单引号或双引号([]匹配括号内的任一字符)

/<img.*?src=['"]/

接着要把匹配出来的url独立一个项出现在匹配结果里,使用分组符()

/<img.*?src=['"](.*?)['"]/

由于img元素可能定义了dataMap的src属性(如data-src=“xxx”),为了区分出来,还需要在src前匹配一个空格\s

/<img.*?\ssrc=['"](.*?)['"]/

//匹配结果的下标为1的项即是图片url

但这样得到的只是一个url,虽然有全匹配模式global,但global模式下是不会把分组获得的单独项的。若要得到所有url,要先通过global模式分离所有img元素,再逐项获取url

// 获取所有匹配的img元素
// 这里只关心拿到<img>的整个标签,所以用非贪婪模式找到最近的关闭标签 >
let imgStrs = htmlStr.match(/<img.*?>/g)

// 获取每个img url
let urls = imgStrs.map(url=>{
  return url.match(/\ssrc=['"](.*?)['"]/)[1]
))
  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值