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联系作者 亲自帮你解决。

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