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

发布于 1周前 作者 itying888 最后一次编辑是 5天前 来自 分享

Arkts正则获取HTML所有img的链接和JavaScript正则获取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]
))
回到顶部