正则表达式提取网页的图片

最新推荐文章于 2024-06-13 11:45:41 发布

hanq2016

最新推荐文章于 2024-06-13 11:45:41 发布

阅读量1.1k

点赞数 1

分类专栏： js

本文链接：https://blog.youkuaiyun.com/hanq2016/article/details/124005522

版权

javascript 前端

js 专栏收录该内容

16 篇文章

订阅专栏

let html = `<html style="height: 100%;"><head><meta name="viewport" content="width=device-width, minimum-scale=0.1"><title>PCfb_5bf082d29588c07f842ccde3f97243ea.png (540×258)</title><input type="hidden" id="_w_pedant"><script type="text/javascript" src="chrome-extension://dbjbempljhcmhlfpfacalomonjpalpko/scripts/inspector.js"></script></head><body style="margin: 0px; background: #0e0e0e; height: 100%"><img style="-webkit-user-select: none;margin: auto;cursor: zoom-in;background-color: hsl(0, 0%, 90%);transition: background-color 300ms;" src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png" width="403" height="192"><img style="-webkit-user-select: none;margin: auto;cursor: zoom-in;background-color: hsl(0, 0%, 90%);transition: background-color 300ms;" src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png" width="403" height="192"><img style="-webkit-user-select: none;margin: auto;cursor: zoom-in;background-color: hsl(0, 0%, 90%);transition: background-color 300ms;" src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png" width="403" height="192"><img style="-webkit-user-select: none;margin: auto;cursor: zoom-in;background-color: hsl(0, 0%, 90%);transition: background-color 300ms;" src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png" width="403" height="192"></body></html>`

/*
	1、提取所有的img标签
	.		匹配除换行符以外的所有字符
	*?	匹配方式是非贪婪式的，找最近
	g		全局匹配
*/ 
let reg = /<img.*?>/g
// 提取出html中所有的img标签
let arr = html.match(reg)
/*
	2、提取所有的img标签中的src值
	\s		匹配一个空格
	src=	匹配src=
	['"]	匹配单引号或双引号 
	(.*?)	非贪婪式匹配非换行符的字符	
*/
let reg1 = /\s+src=['"](.*?)['"]/
let arr1 = arr.map(item=>{
	return item.match(reg1)[1]
})
console.log(arr1)

// 提取的结果arr1
[
  'https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png',
  'https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png',
  'https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png',
  'https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png'
]