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
},
结果: