小程序htm标签-小程序富文本渲染HTM标签添设置样式-小程序标签-即速应用

小程序htm标签-小程序富文本渲染HTM标签添设置样式-小程序标签

浏览量：1923 时间：2020-03-20 来源：前端_李嘉豪

1.平时我们用到富文本渲染的时候有一个问题会让我们无从下手，如何给富文本大字符串里的标签添加class样式去控制呢，
2.小编今天教大家一种简单通过的方法；
3.首先我们是用官方自带的富文本渲染标签
rich-textnodes="{{content}}"bindtap="tap"/rich-text
4.然后我们下一步进行对富文本进行下一步操作添加class样式
//index.js//获取应用实例constapp=getApp()Page({data:{content:''},onShow(){this.getMsg()},getMsg(){letthat=this;wx.request({url:'https://xxx.xxxx.com/app/api/mini_app/content.php?id=7798',success:function(res){console.log(res.data.content)res.data.content=res.data.content.replace(/widths*:s*[0-9]+px/g,'width:100%');res.data.content=res.data.content.replace(/([/]?)(center)((:?s*)(:?[^]*)(:?s*))/g,'$1div$3');//替换center标签res.data.content=res.data.content.replace(/img/gi,'imgclass="rich-img"');//正则给img标签增加class//或者这样直接添加修改styleres.data.content=res.data.content.replace(/styles*?=s*?([‘"])[sS]*?1/ig,'style="width:100%;height:auto;display:block;margin:auto"');res.data.content=res.data.content.replace(/p/gi,'Pclass="rich-p"');//正则给p标签增加classthat.setData({content:res.data.content})}})}}).rich-img{width:100%;margin:20rpx0;}.rich-p{color:#333333;font-size:32rpx;line-height:45rpx;}
5.如上代码这样我们就成功的给img标签用正则添加了一个class样式，我们只需要控制包裹富文本内容的容器宽度即可，图片就会自动100%；也就不会出现图片溢出显示区域的问题了，别的标签也一样，比葫芦画瓢即可；
6.
7.
8.喜欢上方小程序,需要源码的,私信小编留下邮箱。