小程序富文本渲染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
              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%；也就不會出現圖片溢出顯示區域的問題了，別的標籤也一樣，比葫蘆畫瓢即可；

需要上方小程序源碼的，關注私信小編，免費分享