微信小程序使用rich-text解析富文本字符串的时候，遇到image标签图片很大超过屏幕

场景：

使用uniapp开发微信小程序，解析富文本文章需求

用到的组件：

1. u-view2.0的u-parse 
2. 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, '');