小程序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 相关文章推荐
ext监听事件方法[初级篇]
Apr 27 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 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
基于mysql的bbs设计(三)
2006/10/09 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
详细介绍Ruby中的正则表达式
2015/04/10 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
详解Python字符串切片
2019/05/20 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
中软Java笔试题
2012/11/11 面试题
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
高中生毕业自我鉴定
2013/10/10 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
企业挂职心得体会
2014/09/10 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
冰雪公主观后感
2015/06/16 职场文书
24年收藏2000多部退役军用电台
2022/02/18 无线电
Docker部署Mysql8的实现步骤
2022/07/07 Servers