1. 场景
在小程序开发过程中, 请求回来的数据, 有时候会带有 h5 标签, 直接展示的话: 会在页面上显示出 h5 标签
方法: 使用 <rich-text mode="{{info}}"> </rich-text> 解析 h5 标签
现象: 解析出的图片, 文字等样式需要设置
2. 方法
(1) 使用正则给标签加上类名
(2) 在此类名中写上自己想要的样式
(3) 如
JS 中 -- 使用正则加类名 其中: info 是从请求回来的数据
- info = info
- .replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
- .replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p')
- .replace(/<p>/ig, '<p class="p_class">')
- .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$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;
- }
- }
来源: http://www.bubuko.com/infodetail-3098218.html