網(wǎng)站建設(shè)怎么樣真正免費(fèi)建站
場(chǎng)景:
使用uniapp開發(fā)微信小程序,解析富文本文章需求
用到的組件:
- u-view2.0的u-parse?
- 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, '');