场景:
使用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实例(仅供参考)。
<template><div><div style="padding:32rpx;background: #FFFFFF;width: 100%;"><!-- 解析富文本 --><!-- <u-parse :content="contentData"></u-parse> --><!-- 简单字符串用rich-text性能会好些 --><rich-text :nodes="content"></rich-text></div></div>
</template><script>import { 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 style="width:100%;height:auto"')}}},components: {},computed: {...mapState(["hasLogin", ])},mounted() {},onShow() {},methods: {}}
</script><style lang="scss" 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, '');