小程序 rich-text富文本 的一些问题

图片

1、返回的数据中有的图片很大，在手机上显示会出现需要左右滑动的情况，那么我们就要做如下处理了，给图片加个样式

 data= data.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ');

换行

2、返回的数据中明明是有换行的，但是就是不生效，看不到效果，那么就又需要处理一下咯

data= data.replace(/\<p>&nbsp;<\/p>/gi, '<br/>');

空格

3、除了换行，也有空格不生效的，如下处理就好啦

data=data.replace(/\ /gi, '\xa0')

视频

4、video节点不显示问题
思路：以video截取拆分成数组，然后页面渲染时这个数组显示内容

• js处理，得到拆分好的数据数组

// 富文本视频解析
  getVideo(data) {
    let videoList = [];
    let videoReg = /<video.*?(?:>|\/>)/gi; //匹配到字符串中的 video 标签
    let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; //匹配到字符串中的 video 标签 的路径
    let arr = data.content.match(videoReg) || []; // arr 为包含所有video标签的数组
    let articleList = data.content.split('</video>') // 把字符串  从视频标签分成数组
    arr.forEach((item, index) => {
      var src = item.match(srcReg);
      videoList.push(src[1]) //所要显示的字符串中 所有的video 标签 的路径
    })
    let needArticleList = [];
    articleList.forEach((item, index) => {
      if (item != "" && item != undefined) { //  常见的标签渲染
        needArticleList.push({
          type: 'rich-text',
          value: item + "</video>"
        });
      }
      let articleListLength = articleList.length; // 插入到原有video 标签位置
      if (index < articleListLength && videoList[index] != undefined) {
        needArticleList.push({
          type: 'video',
          value: videoList[index]
        })
      }
    })
    return needArticleList
  },

• wxml 页面渲染

 <view class="infoContentStyle" wx:for="{{data.needArticleList}}" wx:key="index">
      <rich-text wx:if="{{item.type=='rich-text'}}" class='content' nodes="{{item.value}}"></rich-text>
      <video wx:if="{{item.type=='video' && item.value}}" src="{{item.value}}"
        style="width:100%;height: 150px" frameborder="0"></video>
    </view>