vue 如何拿到后台传回的富文本中的img,进行9宫格排列展示以及相关处理
描述: res.data.list 返回的数组, 数组中的每个对象有一个 content,就是传回来的富文本的内容,要拿到这里面的所有的img,进行9宫格排列处理;
1、let img = this.getObjectKeys(item.content.match(/<img[^>]+>/g));
抓取到每个content中的 img, 成为数组,但是可能存在方法不标准,getObjectKeys 进行一下标准的转换;
//写成标准的方法(数组是object的一种):
getObjectKeys(object){
var values = [];
for (var property in object)
values.push(object[property]);
return values;
}
2、循环拿到的img数组, replace 中 嵌套img正则
img[i].replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
arrImg += '<div class="img-box" style="background: url(\'' + capture + '\') no-repeat center / cover;width:150px;height:150px;margin: 0 15px 15px 0;display:inline-block" ></div>'
});
拿到所有的src, 也就是图中的capture, 在进行自定义赋值,处理等操作 ;