uniapp和微信小程序修改rich-text裏面圖片樣式

前言:最近做的電商項目,由於商品詳情傳過來的圖片的width各不相同,所以展示的時候會超出視線。需要去替換富文本里面的標籤樣式,達到圖片的適配。

代碼:

data.introduction = data.introduction.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 style="width: 100%;" $1');

注意最後面的'<img style="width: 100%;" $1')標籤,$1的位置我放在後面的。網上很多教程寫的是:<img$1 style="width: 100%; ",嘗試了很多次都不行,最後分析出來那樣解析標籤有問題。標籤的閉合斜槓'/'會出現在中間,所以解析出錯。

修改前截圖:

修改後截圖:

 

綜上:如果仍然沒有解決您的問題,可以關注公衆號:FOSSspace聯繫作者 親自幫你解決。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章