rich-text富文本使用

場景

最近在開發學習   Uniapp 的過程中遇到了富文本的顯示，對比了  微信小程序 中生成的代碼，才發現原來微信官方早就開發了 <rich-text> 標簽，可以很方便的拿來使用

所以，在此對 rich-text 的使用方法進行一點整理

 

簡單界面應用

 

 

后台返回數據如下

<p><img src="http://yanxuan.nosdn.127.net/6b69f7597ccffd27d77467d9d04eb294.jpg" 
_src="http://yanxuan.nosdn.127.net/6b69f7597ccffd27d77467d9d04eb294.jpg" style=""/></p>
<p><img src="http://yanxuan.nosdn.127.net/a89ca371ef07355c1feb293db961bd30.jpg"
 _src="http://yanxuan.nosdn.127.net/a89ca371ef07355c1feb293db961bd30.jpg" style=""/></p>
<p><img src="http://yanxuan.nosdn.127.net/2076e89c5f8fde4f44f918bd02d18eb7.jpg" 
_src="http://yanxuan.nosdn.127.net/2076e89c5f8fde4f44f918bd02d18eb7.jpg" style=""/></p>

處理邏輯

 

根據 商品ID，網絡請求其商品詳情內容；然后將 "html" 格式的代碼進行轉化；最后賦值於 detail變量

 

上代碼

 

目的：匹配富文本代碼中的img標簽，並將其圖片的寬度調整為自適應屏幕，H5 小程序 app

 this.detail=res.data.info.detail.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block"');

max-width：100%  指定元素的寬度不超過父組件則大小不變，如果超過了父元素的寬度，則將寬度收縮為父組件的寬度

 

display：block 去除圖片之間的間隙

處理完后的數據

<p><img style="max-width:100%;height:auto;display:block" src="http://yanxuan.nosdn.127.net/6b69f7597ccffd27d77467d9d04eb294.jpg"
 _src="http://yanxuan.nosdn.127.net/6b69f7597ccffd27d77467d9d04eb294.jpg" style=""/></p>
<p><img style="max-width:100%;height:auto;display:block" src="http://yanxuan.nosdn.127.net/a89ca371ef07355c1feb293db961bd30.jpg"
 _src="http://yanxuan.nosdn.127.net/a89ca371ef07355c1feb293db961bd30.jpg" style=""/></p>

 

但是！！ 設置的樣式沒有顯示，聰明機智的我當然第一時間就能發現問題所在，style重復了一個

所以需要先查找出style進行刪除 再進行添加

 

var detail=res.data.info.detail.replace(/style=""/gi,'');
this.detail=detail.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block"');

 

完美解決！我真厲害

上效果圖

 

 

總結：優點就是方便，不用引入外部富文本插件 節省源碼資源，缺點就是有標簽格式不支持 如 section ，目前還在慢慢找坑，最后正則真牛逼！！！！

 

完結！