位置: IT常识 - 正文
使用uni-app写小程序，解析含有html标签的富文本(uni-app实战教程)
编辑：rootadmin推荐整理分享使用uni-app写小程序，解析含有html标签的富文本(uni-app实战教程)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:uni-app开发文档,uni-app实战,uni-app写小程序,uni-app实例教程,uni-app入门,uni-app web-view,uni-app实战教程,uni-app写小程序,内容如对您有帮助，希望把文章链接给更多的朋友！
最近在改一个项目，将html+js+css的项目改成小程序，我说使用的uni来写的，其中遇到一个问题，就是需要解析富文本，在vue中可以直接使用v-html，
但是小程序中的标签都是view，text以及image等，该怎么办呢
于是在uni官网找到插件u-parse
<u-parse :content='dangquestion.question' className='texttitle' :imageProp='imageProp'></u-parse>dangquestion.question是需要展示的富文本字符串，texttitle是类名，可以自己写样式，imageProp，是图片样式,，格式如下
imageProp:{ mode:'aspectFit', domain:'图片的服务器根域名',//富文本中图片一般是'upload/img/1.png' padding:10, lazyLoad:false },
于是下载引用，但是发现一个问题，图片不能完好的展示，并且在span，img标签外包裹一层view标签，使页面不能完全按照富文本展示
后来发现有一个很好的用法
<rich-text :nodes="content" class="texttitle"></rich-text>texttitle是自己定义的样式，content是需要展示的富文本字符串
content需要自己先解析一下，如下
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(/<br[^>]*\/>/gi, '');newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');return newContent;}html是传递的参数，就说包含html标签的富文本，如下
let str='<p><span style=\"color: rgb(0, 0, 0); font-size: 16px;\"><strong>女，28岁。</strong></span></p>'
想要获取content需要 this.content=this.formatRichText(str)
根据以上，带入相应参数即可，可以完美展示富文本，图片大小也可根据富文本样式一比一展示。
完结。
上一篇：conf.exe是什么文件的进程 安全吗 conf进程的详细情况介绍(config.cfg是什么文件)
下一篇：drvddll.exe是病毒进程吗 drvddll进程安全吗(loaddriver.exe是什么病毒)
