我们在开发的过程中,总会遇见需要从正文中提取某些指定内容的任务,这里我在编写一个自媒体投稿平台的时候就遇见了这个问题,常规的编辑器并没有办法导出图片的数组,所以需要我们自己来处理提取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

总结:

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