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

场景：

使用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实例（仅供参考）。

html 复制代码

<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：

javascript 复制代码

        let relTag = /<.+?>/g; //去除标签
        let relClass = /class\s*?=\s*?(['"])[\s\S]*?\1/g;// 清除类名

        let newHtml = "";
        newHtml = newHtml.replace(relTag, '');
        newHtml = newHtml.replace(relClass, '');