小程序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 相关文章推荐
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
JavaScript中return false的用法
Mar 12 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
微信小程序实现时间预约功能
Nov 27 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实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
在Python中增加和插入元素的示例
2018/11/01 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
python的pstuil模块使用方法总结
2019/07/26 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
简单了解Python write writelines区别
2020/02/27 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
农村党支部先进事迹
2014/01/14 职场文书
工程管理专业毕业生自荐信
2014/01/24 职场文书
学校门卫管理制度
2014/01/30 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书