使用uni-app写小程序，解析含有html标签的富文本-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用uni-app写小程序，解析含有html标签的富文本。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近在改一个项目，将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='女，28岁。'

　想要获取content需要 this.content=this.formatRichText(str)

根据以上，带入相应参数即可，可以完美展示富文本，图片大小也可根据富文本样式一比一展示。

完结。文章来源地址https://www.toymoban.com/news/detail-459098.html

到了这里，关于使用uni-app写小程序，解析含有html标签的富文本的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！