小程序rich-text組件如何改變內部img圖片樣式

1、原由

小程序中有一個頁面，很奇葩，是經過後端傳過來的整段HTML字符串展現內容的，那麼咱們暫時叫這個頁面爲content，傳過來以後，他裏面的圖片樣式是不固定的，有的大，有的小，有的有style有的沒有，那我怎麼能讓他統一展現成同樣的樣式呢？

2、辦法

思前想後，我以爲仍是正則比較靠譜，把content裏面全部的img標籤篩選出來，把裏面有style的、有width的、有height的、所有刪除掉，最後在統一加上咱們想要的樣式，最終代碼以下：

<RichText nodes={content} />

下面是HTML字符串處理過程

let html = content
            .replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
            .replace(/<p>/ig, '<p style="font-size: 15Px; line-height: 25Px;">')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
            .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img$1 style="width: 100%; border-radius: 8Px;"');

最終實現了咱們想要的樣式統一的效果啦~

3、總結

我有想過直接在less裏面取到img，而後改變它的樣式，這種辦法在h5中是可行的，可是在小程序中不起做用！由於在小程序中會是一整個rich-text標籤，裏面的內容樣式沒法修改。因此採用這種辦法啦~~可以解決問題。