場(chǎng)景：

使用uniapp開發(fā)微信小程序，解析富文本文章需求

用到的組件：

1. u-view2.0的u-parse?
2. uniapp提供的rich-text

以上兩種組件都是解析富文本的作用，一般用于富文本解析場(chǎng)景，比如解析文章內(nèi)容，商品詳情，帶原生HTML標(biāo)簽的各類字符串等，此組件和uni-app官方的rich-text組件功能有重合之處，但是也有不同的地方。

相同點(diǎn)：

• 二者都能解析HTML字符串

不同點(diǎn)：

• 對(duì)于輕量、簡(jiǎn)單的字符串，rich-text性能更好
• 對(duì)于復(fù)雜的字符串，使用parse組件效果更好，有更多的自定義屬性和效果

總結(jié)：

如果是簡(jiǎn)單的場(chǎng)景，比如一段簡(jiǎn)單的文字和圖片內(nèi)容，可以優(yōu)先使用rich-text組件，在文章內(nèi)容，商品詳情等復(fù)雜的文本詳情，可以優(yōu)先使用uview的u-parse?組件。

遇到的問(wèn)題：

當(dāng)使用uniapp提供的rich-text組件解析富文本的時(shí)候，如果返回的富文本字符串中img標(biāo)簽自帶樣式width很大，或者沒(méi)有樣式，原本圖片就很大，這種情況，解析后圖片寬度會(huì)超出屏幕，至于為什么會(huì)這樣，是因?yàn)橛锌赡苓@篇文章是在pc端展示的，并且標(biāo)簽內(nèi)聯(lián)樣式寫了很大的寬度。但是使用uview的u-parse 組件解析就不會(huì)出現(xiàn)這個(gè)問(wèn)題，應(yīng)該是組件內(nèi)部做了處理。

解決辦法：

當(dāng)從接口獲取富文本字符串的時(shí)候，通過(guò)正則去修改img里的內(nèi)聯(lián)style標(biāo)簽里的樣式。

以下是我在項(xiàng)目中碰到使用正則的demo實(shí)例（僅供參考）。

<template><div><div style="padding:32rpx;background: #FFFFFF;width: 100%;"><!-- 解析富文本 --><!-- <u-parse :content="contentData"></u-parse> --><!-- 簡(jiǎn)單字符串用rich-text性能會(huì)好些 --><rich-text :nodes="content"></rich-text></div></div>
</template><script>import { mapState } from 'vuex';export default {data() {return {content: ''}},props: {contentData: {//這里的props傳遞下拉的數(shù)據(jù)是父組件通過(guò)接口拿到的富文本字符串type: String,default: ''},},watch: {contentData: {immediate: true,handler(val) {//使用正則先去掉img標(biāo)簽上的style樣式this.content = val.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/g, '')//再使用這種去重寫內(nèi)聯(lián)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>

下面是通過(guò)正則清除掉類名或者去除標(biāo)簽的demo：?

        let relTag = /<.+?>/g; //去除標(biāo)簽let relClass = /class\s*?=\s*?([‘"])[\s\S]*?\1/g;// 清除類名let newHtml = "";newHtml = newHtml.replace(relTag, '');newHtml = newHtml.replace(relClass, '');