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

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/haskellbc/10619.html