你是网站设计有限公司的项目经理,城市网站建设分析报告,网站建设终身不用维护,防城港做网站场景#xff1a;
使用uniapp开发微信小程序#xff0c;解析富文本文章需求
用到的组件#xff1a;
u-view2.0的u-parse uniapp提供的rich-text 以上两种组件都是解析富文本的作用#xff0c;一般用于富文本解析场景#xff0c;比如解析文章内容#xff0c;商品详情
使用uniapp开发微信小程序解析富文本文章需求
用到的组件
u-view2.0的u-parse uniapp提供的rich-text 以上两种组件都是解析富文本的作用一般用于富文本解析场景比如解析文章内容商品详情带原生HTML标签的各类字符串等此组件和uni-app官方的rich-text组件功能有重合之处但是也有不同的地方。 相同点
二者都能解析HTML字符串
不同点
对于轻量、简单的字符串rich-text性能更好对于复杂的字符串使用parse组件效果更好有更多的自定义属性和效果
总结
如果是简单的场景比如一段简单的文字和图片内容可以优先使用rich-text组件在文章内容商品详情等复杂的文本详情可以优先使用uview的u-parse 组件。
遇到的问题
当使用uniapp提供的rich-text组件解析富文本的时候如果返回的富文本字符串中img标签自带样式width很大或者没有样式原本图片就很大这种情况解析后图片宽度会超出屏幕至于为什么会这样是因为有可能这篇文章是在pc端展示的并且标签内联样式写了很大的宽度。但是使用uview的u-parse 组件解析就不会出现这个问题应该是组件内部做了处理。
解决办法
当从接口获取富文本字符串的时候通过正则去修改img里的内联style标签里的样式。
以下是我在项目中碰到使用正则的demo实例仅供参考。
templatedivdiv stylepadding:32rpx;background: #FFFFFF;width: 100%;!-- 解析富文本 --!-- u-parse :contentcontentData/u-parse --!-- 简单字符串用rich-text性能会好些 --rich-text :nodescontent/rich-text/div/div
/templatescriptimport { mapState } from vuex;export default {data() {return {content: }},props: {contentData: {//这里的props传递下拉的数据是父组件通过接口拿到的富文本字符串type: String,default: },},watch: {contentData: {immediate: true,handler(val) {//使用正则先去掉img标签上的style样式this.content val.replace(/style\s*?\s*?([‘])[\s\S]*?\1/g, )//再使用这种去重写内联style样式this.content this.content.replace(/\img/gi, img stylewidth:100%;height:auto)}}},components: {},computed: {...mapState([hasLogin, ])},mounted() {},onShow() {},methods: {}}
/scriptstyle langscss scoped
/style
下面是通过正则清除掉类名或者去除标签的demo let relTag /.?/g; //去除标签let relClass /class\s*?\s*?([‘])[\s\S]*?\1/g;// 清除类名let newHtml ;newHtml newHtml.replace(relTag, );newHtml newHtml.replace(relClass, );
