小程序rich-text组件改变内部img图片样式的方法

小程序rich-text组件如何改变内部img图片样式的方法

最近开发小程序，从后台用富文本设置的内容，生成的字符串，在小程序端用wxParse插件解析html，后台设置加粗，小程序端出现换行，格式回显不正确的问题，所以用到微信官方APIrich-text解决了这个问题

rich-text 1.4.0 后推出来的，可以通过js脚本把html解析成一定格式的nodes，然后在 rich-text 中显示。

• index.wxml中

<rich-text nodes="{{newsInfo.content}}"></rich-text>

这样页面就正常显示了，但是还存在一个问题，他里面的图片样式是不固定的，有的大，有的小，有的有style有的没有，那我怎么能让他统一展示成一样的样式呢？思前想后，我觉得还是正则比较靠谱，把content里面所有的img标签筛选出来，把里面有style的、有width的、有height的、全部删除掉，最后在统一加上我们想要的样式，最终代码如下：

• 下面是HTML字符串处理过程

info.content = info.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 style="width: 100%;" $1');
this.setData({
    newsInfo: info
})

最终实现了我们想要的样式统一的效果啦~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我的公众号qianduanxiaomiao。