要从HTML中提取img标签的src属性(图片链接),可以使用正则表达式方式。

最新推荐文章于 2023-09-26 23:15:10 发布

原创最新推荐文章于 2023-09-26 23:15:10 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #正则表达式 #前端

该文章介绍了如何使用正则表达式在JavaScript中匹配并提取HTML文档中<img>标签的src属性，从而获取图片URL。通过调用字符串的matchAll()方法，匹配结果被存储在数组中，然后进一步处理得到所有图片链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 定义提取src属性的正则表达式:

const srcRegex = /<img\s+(?:[^>]*?\s+)?src\s*=\s*(["'])((?:[^\1"]|\\\1|.)*?)\1/g

这个正则会匹配类似<img src="http://example.com/1.jpg">中的src属性和括号中的连接。2. 调用字符串的matchAll()方法使用正则匹配字符串:

const result = [...yourHTML.matchAll(srcRegex)]

3. result变量会是正则匹配结果的数组,包含匹配的img标签src属性信息,我们将src属性的值(图片链接)提取出来:

const imgSrcs = result.map(v => v[2])

4. imgSrcs数组包含了所有img标签的src链接,我们获取到了HTML中图片的URL列表。完整代码如下:

const srcRegex = /<img\s+(?:[^>]*?\s+)?src\s*=\s*(["'])((?:[^\1"]|\\\1|.)*?)\1/g 
const result = [...yourHTML.matchAll(srcRegex)]
const imgSrcs = result.map(v => v[2])
console.log(imgSrcs)

例子：

getImage(){
				const srcRegex = /<img\s+(?:[^>]*?\s+)?src\s*=\s*(["'])((?:[^\1"]|\\\1|.)*?)\1/g
				const result = [...this.editorHtml.matchAll(srcRegex)]
				const imgSrcs = result.map(v => v[2])
				return imgSrcs
			},

结果：