最近遇到一個需求需要在小程序顯示富文本，富文本排版內容中包含空格，但是代碼寫完打包運行之后發現內容都顯示正常，空格一個都沒有了。
一番搜索加測試之后，發現把空格轉義成 在網頁中能正常顯示空格。或者給富文本標簽增加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%，保證圖片能在富文本渲染區域完整顯示。
--- 完 ---
