小程序富文本渲染HTMl标签添设置样式

平时我们用到富文本渲染的时候有一个问题会让我们无从下手，如何给富文本大字符串里的标签添加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%；也就不会出现图片溢出显示区域的问题了，别的标签也一样，比葫芦画瓢即可；

 

喜欢上方小程序,需要源码的,私信小编留下邮箱。