phpcms网站备份宿迁建设安全监督站网站
场景：
使用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, '');