最近遇到一個需求需要在小程序顯示富文本，富文本排版內(nèi)容中包含空格饭冬，但是代碼寫完打包運行之后發(fā)現(xiàn)內(nèi)容都顯示正常使鹅，空格一個都沒有了。
一番搜索加測試之后昌抠，發(fā)現(xiàn)把空格轉(zhuǎn)義成 在網(wǎng)頁中能正常顯示空格患朱。或者給富文本標(biāo)簽增加css樣式 white-space: pre-wrap;也能顯示空格炊苫。
然后就是挨個操作裁厅，打包運行。結(jié)果兩個方法分別測試空格依然么有顯示侨艾，組合測試依然不顯示执虹。但是在微信開發(fā)者工具中查看富文本組件樣式是有white-space: pre-wrap;這個樣式的，嘗試取消該樣式唠梨，組件渲染沒有任何變化袋励，再次勾選該樣式后神奇的事情出現(xiàn)了，富文本組件渲染了全部的空格当叭。但是一開始渲染是不會顯示空格的茬故。故，以上兩個解決方案都不可行蚁鳖。
空格的轉(zhuǎn)義和編碼： 對應(yīng)的unicode編碼就是\xa0磺芭。
再次搜索后發(fā)現(xiàn)新的解決方案：嘗試把空格直接替換成unicode編碼的碼值\xa0，打包運行后發(fā)現(xiàn)這次富文本組件中的空格全部渲染了醉箕。
// html 為傳入的富文本內(nèi)容
// 我們使用正則表達式 /(\s*<[^>]+>)([^<>]*)(<\/[^>]+>\s*)/g 匹配到標(biāo)簽中間的空格
let newContent= html.replace(/(\s*<[^>]+>)([^<>]*)(<\/[^>]+>\s*)/g, function (str, $1, $2, $3) {
return [$1.trim(), $2.replace(/\s/gi, '\xa0'), $3.trim()].join('')
})
空格的問題解決了徘跪，繼續(xù)優(yōu)化一下。
移動端富文本內(nèi)容中圖片尺寸限制
文本正常顯示之后發(fā)現(xiàn)富文本中的圖片顯示效果不太好琅攘，有的圖片按實際尺寸顯示會超過富文本渲染區(qū)域垮庐，只顯示圖片的一部分，看起來布套友好坞琴。
處理的思路是匹配到富文本中全部的img標(biāo)簽哨查，給每個img標(biāo)簽加上樣式限制圖片顯示的最大寬度為100%。
html.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
return newContent;
}
我們可以封裝一個方法對富文本內(nèi)容進行處理剧辐，完整代碼如下：
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;
}
調(diào)用方法 let newHtml = formatRichText(html)寒亥。
至此邮府，小程序中富文本渲染內(nèi)容空格會全部顯示，圖片也被限制為最大寬度是 100%溉奕，保證圖片能在富文本渲染區(qū)域完整顯示褂傀。
--- 完 ---
