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， 在进行自定义赋值，处理等操作 ；

 

转载于:https://www.cnblogs.com/aoqizhonghua/p/10399688.html