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]
))

 

 

来源：https://blog.csdn.net/u011539729/article/details/103618300