平时我们用到富文本渲染的时候有一个问题会让我们无从下手,如何给富文本大字符串里的标签添加class样式去控制呢,
小编今天教大家一种简单通过的方法;
首先我们是用官方自带的富文本渲染标签
<rich-text nodes="{{content}}" bindtap="tap"></rich-text>
然后我们下一步进行对富文本进行下一步操作添加class样式
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
content:''
},
onShow(){
this.getMsg()
},
getMsg(){
let that = 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(/width\s*:\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, '<img class="rich-img" ');//正则给img标签增加class
//或者这样直接添加修改style
res.data.content = res.data.content.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, 'style="width:100%;height:auto;display: block;margin:auto"');
res.data.content = res.data.content.replace(/\<p/gi, '<P class="rich-p" ');//正则给p标签增加class
that.setData({
content: res.data.content
})
}
})
}
})
.rich-img{
width: 100%;
margin: 20rpx 0;
}
.rich-p{
color: #333333;
font-size: 32rpx;
line-height: 45rpx;
}
如上代码这样我们就成功的给img标签用正则添加了一个class样式,我们只需要控制包裹富文本内容的容器宽度即可,图片就会自动100%;也就不会出现图片溢出显示区域的问题了,别的标签也一样,比葫芦画瓢即可;
喜欢上方小程序,需要源码的,私信小编留下邮箱。