小程序使用RichText标签解析富文本的时候，会碰到一些问题。
1.图片在后台设置了宽高。固定的宽高导致页面变形，需要设置最大宽度。
2.nbsp空格不起作用。
3.后端返回单位是px，需要替换成rpx
解决：
写了两个工具类：
1.nbsp空格不起作用
/**
* 富文本转义
* @param {obj, obj}
* @return {number}
*/
const escape2Html = (str = "") => {
var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': '<span style="width: 4px;display: inline-block;"></span>', 'amp': '&', 'quot': '"' };
return str .replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; });
}
2.处理图片大小和rpx的转化
/**
* 详情富文本图片重写
* @param {String} content
*/
const contentRebuild = content => {
if (!content) {
return
}
const imgReg = /<img.*?(?:>|\/>)/gi
const srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i
const styleReg = /style="([^"]*)"/g
let contentstr = String(content).replace(imgReg, match => {
let newStyleImg = ''
// 图片样式保留原来style添加大小限制，若原来img没有设style则直接插进去
newStyleImg = match.match(styleReg)
? match.replace(styleReg, 'style="$1max-width:100%;height:auto;"')
: match.replace(/<img/gim, '<img style="max-width:100%;height:auto;"')
// 小程序中，px替换成rpx
newStyleImg = host.ENV_TYPE === 'WEAPP' ? newStyleImg.replace(/px;/gim, 'rpx;') : newStyleImg
// 检查图片链接是否相对路径，若是则替换成包含域名的绝对路径
const src_str = newStyleImg.match(srcReg)
const newUrl = preLink(src_str[1])
return newUrl === src_str[1] ? newStyleImg : newStyleImg.replace(src_str[1], newUrl)
})
return contentstr
}
