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 ，目前还在慢慢找坑，最后正则真牛逼！！！！

 

完结！