小程序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 相关文章推荐
asp批量修改记录的代码
Jun 25 Javascript
基于jquery的商品展示放大镜
Aug 07 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
vuex存储token示例
Nov 11 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 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
php限制ip地址范围的方法
2015/03/31 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python使用chardet判断字符编码
2015/05/09 Python
python简单实现旋转图片的方法
2015/05/30 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
园长自我鉴定
2013/10/06 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
律政俏佳人观后感
2015/06/09 职场文书