小程序rich-text组件如何改变内部img图片样式的方法


Posted in Javascript onMay 22, 2019

一、起因

小程序中有一个页面,很奇葩,是通过后端传过来的整段HTML字符串展示内容的,那么我们暂时叫这个页面为content,传过来之后,他里面的图片样式是不固定的,有的大,有的小,有的有style有的没有,那我怎么能让他统一展示成一样的样式呢?

二、办法

思前想后,我觉得还是正则比较靠谱,把content里面所有的img标签筛选出来,把里面有style的、有width的、有height的、全部删除掉,最后在统一加上我们想要的样式,最终代码如下:

<RichText nodes={content} />

下面是HTML字符串处理过程

let html = content
      .replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
      .replace(/<p>/ig, '<p style="font-size: 15Px; line-height: 25Px;">')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img$1 style="width: 100%; border-radius: 8Px;"');

最终实现了我们想要的样式统一的效果啦~

三、总结

我有想过直接在less里面取到img,然后改变它的样式,这种办法在h5中是可行的,但是在小程序中不起作用!因为在小程序中会是一整个rich-text标签,里面的内容样式无法修改。所以采用这种办法啦~~能够解决问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
JavaScript中的 new 命令
May 22 #Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 #Javascript
原生JS实现列表内容自动向上滚动效果
May 22 #Javascript
小程序如何使用分包加载的实现方法
May 22 #Javascript
原生js实现trigger方法示例代码
May 22 #Javascript
koa router 多文件引入的方法示例
May 22 #Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 #Javascript
You might like
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
JavaScript Date对象使用总结
2009/05/14 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
python 编码规范整理
2018/05/05 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python3爬虫中异步协程的用法
2020/07/10 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
生物技术专业毕业生求职信范文
2013/12/14 职场文书
总经理司机岗位职责
2015/04/10 职场文书
电影开国大典观后感
2015/06/04 职场文书
安全第一课观后感
2015/06/18 职场文书
世界名著读书笔记
2015/06/25 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js