uni-app 小程序解决rich-text富文本样式设置不成功问题

淡淡的烟草味﹌ 2023-05-29 02:40 27阅读 0赞

### 富文本样式 ###

[uni-app rich-app（富文本） 组件介绍 ][uni-app rich-app_ _]

#### 请求到的富文本文件内容 ####

"编者按：本文来自微信公众号“<a href=\"https://mp.weixin.qq.com/s/zcN6wTnZm3ann6tNicjyrQ\" target=\"_blank\" >略大参考</a>”（ID:hyzibenlun），作者 刘意默，编辑 原野，发布。在B站拥有604万粉丝的游戏视频博主敖厂长最近不太顺利。毫无疑问，他是圈内大，.....
 
 的吐槽。<img style=\"max-width:100%\" src=\"https://pic.36krcnd.com/201911/01005934/vye0os205xv1kuba!heading\" data-img-size-val=\"640,737\"/>这一期视频的播放量达到332万，视频里，敖厂长快意恩仇，对游戏中的槽点不留情面大加批判，比如，“被廉价感糊了一脸，粗糙的建模，捉急的美工，这款游戏的画面整整落后了一个世代。”这样的敖厂长显然是粉丝喜欢的。</p

##### 目的：将富文本图片添加圆角样式 #####

###### 方法：通过正则，将请求后的富文本数据中的 <img 标签，进行替换 ######

var strings = res.data.content; 
 		//请求到的富文本数据文件
 const regex = new RegExp('<img style="max-width:100%"','gi'); 
 		//创建一个正则匹配规则
 
 		// new RegExp('<img style="max-width:100%"','gi') 
 			// g表示global全局搜索 i表示ignore case 忽略大小写 m 执行多行匹配
 		
 var richtext = strings.replace(regex, `<img style="max-width: 100%; border-radius: 12px;"`);
 		// 将想要的样式属性携带在标签上，替换原来的标签即可。
 this.strings = richtext;
 		// 最后将修改后的富文本传到data中，渲染到视图层即可。

[uni-app rich-app_ _]: https://uniapp.dcloud.io/component/rich-text