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

本文主要是介绍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]
))

这篇关于JS正则获取HTML所有img的链接的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---