1. 场景
在小程序开发过程中，请求回来的数据，有时候会带有h5标签，直接展示的话： 会在页面上显示出h5标签
方法：使用 <rich-text mode="{{info}}"> </rich-text> 解析h5标签
现象：解析出的图片、文字等样式需要设置
2. 方法
(1) 使用正则给标签加上类名
(2) 在此类名中写上自己想要的样式
(3) 如
- js中--使用正则加类名 其中：info是从请求回来的数据
info = info .replace(/<p([sw"=/.:;]+)((?:(style="[^"]+")))/ig, '<p') .replace(/<p([sw"=/.:;]+)((?:(class="[^"]+")))/ig, '<p') .replace(/<p>/ig, '<p class="p_class">') .replace(/<img([sw"-=/.:;]+)((?:(height="[^"]+")))/ig, '<img$1') .replace(/<img([sw"-=/.:;]+)((?:(width="[^"]+")))/ig, '<img$1') .replace(/<img([sw"-=/.:;]+)((?:(style="[^"]+")))/ig, '<img$1') .replace(/<img([sw"-=/.:;]+)((?:(alt="小程序"]+")))/ig, '<img$1') .replace(/<img([sw"-=/.:;]+)/ig, '<img$1 class="pho"')
this.setData({
info: info
})
- less中--定义样式表
rich-text { width: 670rpx; display: block; font-size: 28rpx; color: #353535; letter-spacing: 1rpx; .p_class { line-height: 46rpx; text-indent: 60rpx; margin-bottom: 20rpx; } .pho { display: block; width: 670rpx !important; height: 330rpx; border-radius: 20rpx; } }
