最近在改一个项目,将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)

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

完结。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。