小程序rich-text组件如何改变内部img图片样式的方法
最近开发小程序，从后台用富文本设置的内容，生成的字符串，在小程序端用wxParse插件解析html，后台设置加粗，小程序端出现换行，格式回显不正确的问题，所以用到微信官方API**rich-text**解决了这个问题
rich-text 1.4.0 后推出来的，可以通过js脚本把html解析成一定格式的nodes，然后在 rich-text 中显示。
index.wxml中
这样页面就正常显示了，但是还存在一个问题，他里面的图片样式是不固定的，有的大，有的小，有的有style有的没有，那我怎么能让他统一展示成一样的样式呢？思前想后，我觉得还是正则比较靠谱，把content里面所有的img标签筛选出来，把里面有style的、有width的、有height的、全部删除掉，最后在统一加上我们想要的样式，最终代码如下：
下面是HTML字符串处理过程
info.content = info.content.replace(/<p([\s\w”=/.:;]+)((?:(style=”[^”]+”)))/ig, ‘<p’)
.replace(//ig, ‘
‘)
.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’);
this.setData({
newsInfo: info
})
最终实现了我们想要的样式统一的效果啦~
