从html代码中正则匹配match提取img标签

我们在开发的过程中，总会遇见需要从正文中提取某些指定内容的任务，这里我在编写一个自媒体投稿平台的时候就遇见了这个问题，常规的编辑器并没有办法导出图片的数组，所以需要我们自己来处理提取img标签，并且提取出来之后存入数据库中备用。

我的逻辑如下，当用户投稿的时候，不需要用户单独上传海报，当文章中包含了图片的时候，就通过正则提取其中的图片链接，并且存入数据库中，其后在获取自媒体文章的时候，就可以调用图片数组来决定如何展示内容。

小案例及代码如下：

var str=`进口价格看了就够了<img src="https://moejj.com/jljlkge.jpg"/>jkljslejglekg，<img src="https://moejj.com/jljlkge111.jpg"/>`
var matchAll = str.match(/<img(.*?)>/ig);
console.log(matchAll)
for(var i=0;i<matchAll.length;i++) {
	var line = matchAll[i];
	var matchOne = line.match(/<img.+src=\"?(.+\.(jpg|jpeg|gif|bmp|bnp|png))\"?.+>/i);
    console.log(matchOne);
}

你可以看到其中存在有两个图片，首先我们通过str.match(/<img(.*?)>/ig)，将所有图片标签获取到，并且返回一个数组保存对应数据。

然后再通过for循环，单独提取每一个图片标签中的src和后缀等数据。

最后的控制行返回如下：

["<img src=\"https://moejj.com/jljlkge.jpg\"/>", "<img src=\"https://moejj.com/jljlkge111.jpg\"/>"]
["<img src=\"https://moejj.com/jljlkge.jpg\"/>", "https://moejj.com/jljlkge.jpg", "jpg", index: 0, input: "<img src=\"https://moejj.com/jljlkge.jpg\"/>", groups: undefined]
["<img src=\"https://moejj.com/jljlkge111.jpg\"/>", "https://moejj.com/jljlkge111.jpg", "jpg", index: 0, input: "<img src=\"https://moejj.com/jljlkge111.jpg\"/>", groups: undefined]

最后在循环中可通过数组索引来获取对应内容：

var img = matchOne[0]; //<img src=\"https://moejj.com/jljlkge.jpg\"/>
var src = matchOne[1]; //https://moejj.com/jljlkge.jpg
var suffix = matchOne[2]; //jpg

总结：

善用正则，可以做到很多事情。