微信小程序组件之rich-text，转义显示富文本操作

阿里巴啦

已于 2024-05-07 11:13:23 修改

阅读量7k

点赞数 1

分类专栏：微信小程序文章标签：小程序rich-text 小程序富文本 js转义

于 2018-12-11 16:29:42 首次发布

本文链接：https://blog.csdn.net/weixin_42211816/article/details/84957296

版权

微信小程序专栏收录该内容

17 篇文章 6 订阅

订阅专栏

小程序的rich-text组件使用：

效果图

接口获取的数据
接口返回
数据转义后
通过转义

wxml结构

<view class='content'>
  <view class='in'>
    <view class='com'>
      <rich-text nodes="{{myrich}}"></rich-text>
    </view>
  </view>
</view>

js结构

const app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    myrich: "", //文本内容
  },


  //转义方法
  escape2Html(str) {
    var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
    return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; }).replace('<section', '<div').replace('<img', '<img style="max-width:100%;height:auto" ');
  },

  
  //获取内容
  getMyText(e) {
    let that = this,
      post = {};
    post.api = "myTextApi";
    common.ajax(post, function (res) {
      if (res.data.code == 0) {
        const myrich = that.escape2Html(res.data.params.content);
        that.setData({
          myrich: myrich
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getMyText();
  },