使用正则从 html 标签中提取出图片地址
这是一个平时经常用到的技巧,最近做微信小程序,因为提取的产品详情页面是由 p 标签包裹 img 标签的 html 在小程序中不能直接使用,故使用此方法将图片的地址提取出来放入一个数组中
以下是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则从一堆数据中提取图片地址</title>
</head>
<body>
<div id="img"></div>
</body>
<script>
var str = `<p><img src="http://oss.meijiuhui.co/goods/201707/06_163302_55069462.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _01.jpg"/></p><p><img src="http://oss.meijiuhui.co/goods/201707/06_163304_35052725.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _02.jpg"/></p><p><img src="http://oss.meijiuhui.co/goods/201707/06_163306_16230985.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _04.jpg"/></p><p><img src="http://oss.meijiuhui.co/goods/201707/06_163308_39288931.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _05.jpg"/></p><p><img src="http://oss.meijiuhui.co/goods/201707/06_163310_39685096.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _06.jpg"/></p><p><img src="http://oss.meijiuhui.co/goods/201707/06_163311_89028698.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _07.jpg"/></p><p><img src="http://oss.meijiuhui.co/goods/201707/06_163312_72077555.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _08.jpg"/></p><p><img src="http://oss.meijiuhui.co/goods/201707/06_163313_60737734.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _09.jpg"/></p><p><img src="http://oss.meijiuhui.co/goods/201707/06_163315_15742599.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _10.jpg"/></p><p><img src="http://oss.meijiuhui.co/goods/201707/06_163317_25672995.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _11.jpg"/></p><p><img src="http://oss.meijiuhui.co/goods/201707/06_163318_80492008.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _12.jpg"/></p><p><img src="http://oss.meijiuhui.co/goods/201707/06_163319_68445467.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _13.jpg"/></p><p><img src="http://oss.meijiuhui.co/goods/201707/06_163320_71874046.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _14.jpg"/></p><p><img src="http://oss.meijiuhui.co/goods/201707/06_163321_17778012.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _15.jpg"/></p><p><img src="http://oss.meijiuhui.co/goods/201707/06_163322_68418190.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _16.jpg"/></p><p><img src="http://oss.meijiuhui.co/goods/201707/06_163324_52215207.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _17.jpg"/></p><p><img src="http://oss.meijiuhui.co/goods/201707/06_163326_90677460.jpg?x-oss-process=style/gpic_std.jpg" style="float:none;" title="鹊梅红标 _18.jpg"/></p><p><br/></p>`;
var s = str.match(/http(\S*)\.jpg/g);
var h = '<p><img src="';
for(var i = 0;i<s.length;i++){
h+=s[i]+'"></p><p><img src="';
}
var a = h.substr(0,(h.length-10));
document.getElementById("img").innerHTML = a;
console.log(s);
</script>
</html>
至此,我们已经可以将图片地址从字符串中提取出来了 
小 A 空间 , 版权所有丨如未注明转载 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明使用正则从 html 标签中提取出图片地址！
