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

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

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

去除富文本中的html标签及vue、react、微信小程序中的过滤器

在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...

Android检测富文本中的<img标签并实现点击效果

本文旨在:通过点击一张图片Toast输出位置与url链接. 闲话少说,实现原理大概是酱紫的::通过正则表达式检测富文本内的图片集合并获取url,在src=“xxx” 后面添加 onclick方法,至于 ...

从html富文本中提取纯文本

其实从html富文本中提取纯文本很简单,富文本基本上是使用html标签给文本加上丰富多彩的样式. 所以只需要将富文本字符串中的“<.....>”标签剔除,即可得到纯文本.我们可以使用正则表 ...

easyui 后台系统引入富文本编辑器的使用

1.首先,想在项目中引入相关的jar包 2.html页面中加入相关的引用

selenium如何向ueditor富文本中自动输入文本

1.网上给出的方法在百度的富文本控件ueditor中不起作用切换框架失败 2.利用ueditor的api文档,通过js不使用框架切换即可实现轻松写入 eg:ue.setContent('hello')

随机推荐

zabbix监控linux文件的一个目录大小

监控linux文件的一个目录大小 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.       欢迎加入:高级运维工程师之路 598432640 我们知道,Linux自带的一些监控模板 ...

&lbrack;原创&rsqb; PostgreSQL Plus Advanced Server在Windows中配置双机热备流复制

一.系统环境 操作系统:Windows Server 2003/2008 两个节点分别为master与slave. 主节点master:172.27.19.28 备机点slave:172.27.19. ...

练习生产者与消费者-PYTHON多线程中的条件变量同步-Queue

以前练习过,但好久不用,手生,概念也生了, 重温一下.. URL: http://www.cnblogs.com/holbrook/tag/%E5%A4%9A%E7%BA%BF%E7%A8%8B/ ~ ...

番外篇-AppService服务

一. public async Task> GetArchitecture() { var architectur ...

lumion物体系统，导入模型6&period;3

选择物体后可以改变它的颜色 “导入”“导入新模型.”su中模型分正面反面.在lumion中显示是不一样的.正面是可以显示出来的,反面就是透明的,lumion只能识别不同的材质,所以在su中要用不同的颜 ...

【UOJ&num;340】【清华集训2017】小 Y 和恐怖的奴隶主(矩阵快速幂，动态规划)

[UOJ#340][清华集训2017]小 Y 和恐怖的奴隶主(矩阵快速幂,动态规划) 题面 UOJ 洛谷 题解 考虑如何暴力\(dp\). 设\(f[i][a][b][c]\)表示当前到了第\(i\) ...

微擎开发------day04

(1) cache_write($key,$data)  按照指定键名缓存数据 cache_write('test', $data) (2) cache_load($key)  读取指定键名的缓存数据 ...

js图的数据结构处理---迪杰斯特拉算法

/*//1.确定数据结构, mapf[i][j] 为点i到点j的距离 [ Infinity 2 5 Infinity Infinity Infinity Infinity 2 6 Infinity I ...

去除adb传输中的&Hat;M

学习sed过程中,在文本中每行追加内容,发现使用adb会在行末追加一个看不到^M. 场景一:adb保存到文件 adb shell ps|head -n 10 > text.txt,使用sed进行 ...

Python开发：Windows下Python&plus;Eclipse&plus;Pydev开发环境配置

一.配置前的准备: 1.安装jdk: 下载地址: https://www.oracle.com/technetwork/java/javase/downloads/index.html 2.安装Ecl ...