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/gconst result = [...this.editorHtml.matchAll(srcRegex)]const imgSrcs = result.map(v => v[2])return imgSrcs},

结果：