最近遇到一个需求需要在小程序显示富文本，富文本排版内容中包含空格，但是代码写完打包运行之后发现内容都显示正常，空格一个都没有了。
一番搜索加测试之后，发现把空格转义成 在网页中能正常显示空格。或者给富文本标签增加css样式 white-space: pre-wrap;也能显示空格。
然后就是挨个操作，打包运行。结果两个方法分别测试空格依然么有显示，组合测试依然不显示。但是在微信开发者工具中查看富文本组件样式是有white-space: pre-wrap;这个样式的，尝试取消该样式，组件渲染没有任何变化，再次勾选该样式后神奇的事情出现了，富文本组件渲染了全部的空格。但是一开始渲染是不会显示空格的。故，以上两个解决方案都不可行。
空格的转义和编码： 对应的unicode编码就是\xa0。
再次搜索后发现新的解决方案：尝试把空格直接替换成unicode编码的码值\xa0，打包运行后发现这次富文本组件中的空格全部渲染了。
// html 为传入的富文本内容
// 我们使用正则表达式 /(\s*<[^>]+>)([^<>]*)(<\/[^>]+>\s*)/g 匹配到标签中间的空格
let newContent= html.replace(/(\s*<[^>]+>)([^<>]*)(<\/[^>]+>\s*)/g, function (str, $1, $2, $3) {
return [$1.trim(), $2.replace(/\s/gi, '\xa0'), $3.trim()].join('')
})
空格的问题解决了，继续优化一下。
移动端富文本内容中图片尺寸限制
文本正常显示之后发现富文本中的图片显示效果不太好，有的图片按实际尺寸显示会超过富文本渲染区域，只显示图片的一部分，看起来布套友好。
处理的思路是匹配到富文本中全部的img标签，给每个img标签加上样式限制图片显示的最大宽度为100%。
html.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
return newContent;
}
我们可以封装一个方法对富文本内容进行处理，完整代码如下：
export 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(/(\s*<[^>]+>)([^<>]*)(<\/[^>]+>\s*)/g, function (str, $1, $2, $3) {
return [$1.trim(), $2.replace(/\s/gi, '\xa0'), $3.trim()].join('')
})
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
return newContent;
}
调用方法 let newHtml = formatRichText(html)。
至此，小程序中富文本渲染内容空格会全部显示，图片也被限制为最大宽度是 100%，保证图片能在富文本渲染区域完整显示。
--- 完 ---
