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