小程序上显示富文本

util.ts

  export function formatRichText(html: any) { // 富文本内容格式化
    let arrText = html;
    //正则匹配不含style="" 或 style='' 的img标签
    var regex1 = new RegExp("(i?)(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)", "gmi");
    //给不含style="" 或 style='' 的img标签加上style=""
    arrText = arrText.replace(regex1, "$2 style=\"\"$3");
    //正则匹配含有style的img标签
    var regex2 = new RegExp("(i?)(\<img.*?style=['\"])([^\>]+\>)", "gmi");
    //在img标签的style里面增加css样式(这里增加的样式：width:100%;)
    arrText = arrText.replace(regex2, "$2width:100%;$3");
    // 正则表达式  全局匹配 table tr td标签，并给各自标签添加class类名
    arrText = arrText.replace(/<table/g, '<table class="table-rich"')
    arrText = arrText.replace(/<tr/g, '<tr class="table-tr"')
    arrText = arrText.replace(/<td/g, '<td class="table-td"')
    return arrText
  }

使用 index.ts

  import { formatRichText } from "../util";
  data: {
    content: '',
    imgArr: []
  },
  onl oad(options: any) {
    this.getData();
  },
  getData() {
    const res = '富文本编辑器内容'
    const data = formatRichText(res);
    // 主要代码为后面预览图片准备
    let imgArr: any = [];
    let regex = new RegExp(/<img.*?(?:>|\/>)/gi); // 匹配所有图片
    let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配src图片
    let arrsImg = data.match(regex); //  data后台返回的富文本数据
    if (arrsImg && arrsImg.length > 0) {
      for (let i = 0; i < arrsImg.length; i++) {
        let srcs = arrsImg[i].match(srcReg);
        imgArr.push(srcs[1])
      }
    }
    this.setData({
      content: data,
      imgArr
    })
    console.log(data) // 富文本内容
    console.log(imgArr) // 图片数组

  },
    // 点击放大预览图片函数
  catchImage() {
    wx.previewImage({
      current: this.data.imgArr[0], // 当前显示图片的http链接
      urls: this.data.imgArr // 需要预览的图片http链接列表
    })
  },

index.wxml

   <rich-text nodes="{{content}}" space="ensp" catchtap="catchImage"></rich-text>