热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vue如何拿到后台传回的富文本中的img,进行9宫格排列展示以及相关处理

描述:res.data.list返回的数组,数组中的每个对象有一个content,就是传回来的富文本的内容,要拿到这里面的所有的img,进行9宫格排列处理;1、letimgthis

描述: res.data.list 返回的数组, 数组中的每个对象有一个 content,就是传回来的富文本的内容,要拿到这里面的所有的img,进行9宫格排列处理;

1let img = this.getObjectKeys(item.content.match(/]+>/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(/]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
  arrImg += '
'
});

拿到所有的src,  也就是图中的capture, 在进行自定义赋值,处理等操作 ;

 

推荐阅读
author-avatar
itsima
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有