場景：
使用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, '');
