富文本处理

有时候我们需要用到富文本处理，但又不知道该怎么办，针对这种情况，我们可以写一个函数进行处理

小程序富文本处理

首先，创建一个utils.js文件，在此文件下放入这个函数，记得导出

function formatRichText(html) {
	let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
		match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
		match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
		match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
		return match;
	});
	newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
		match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
		return match;
	});
	newContent = newContent.replace(/<br[^>]*\/>/gi, '');
	newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
	return newContent;
}
module.exports = {
	formatRichText
}

然后，在我们需要使用的地方引入utils.js文件

import utils from "../../utils/utils.js"
//接口请求
 utils.request({
      url: interfaceList.interfaceList.industryInfo,
      method: 'get',
      data: {
        industryId: this.data.industryID
      },
      success: res => {
        var arr = {};
        //这里直接使用就可以了
        arr.advantage = utils.formatRichText(res.data.data.advantage)
        //因为formatRichText函数只是处理了一些文字和图片，并没有识别出换行符，所以需要我们进行replaceAll对换行符进行处理
        arr.advantage = arr.advantage.replaceAll("\n", '<br/>')
        this.setData({
          industryInfo: arr
        })
      }
    })

在wxml中直接使用官方给出的富文本标签即可，就像这样

<rich-text class="text" nodes="{{industryInfo.advantage}}"></rich-text>

以上，就是小程序的富文本处理了

vue富文本处理

对于vue的富文本处理就更简单了，我们可以直接使用v-html来进行富文本处理，但是有时候会出现不识别换行符的情况，这个时候，其实我们只需要给使用v-html的标签增加一个 white-space:pre-wrap; 属性样式即可

<div style="white-space:pre-wrap;" v-html="industryInfo.advantage"></div>

值	描述
normal	默认。空白会被浏览器忽略
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止
pre-wrap	保留空白符序列，但是正常地进行换行
pre-line	合并空白符序列，但是保留换行符
inherit	规定应该从父元素继承 white-space 属性的值

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。