【uni-app】富文本图片处理-正则表达式处理
问题接口获取取到的富文本数据图片地址一般是不全的,需要补全图片样式一般不符合移动端展示,需要进行修改处理思路:通过正则匹配img标签抓取src并进行替换.也可以使用第三方类似jquery的dom选择器进行处理baseUrl = 'https://xxxx.com'/*** 传入富文本字符串*/formatRichImg(content, fn){let re = /\<img.*?src=\
·
问题
接口获取取到的富文本数据
- 图片地址一般是不全的,需要补全
- 图片样式一般不符合移动端展示,需要进行修改
处理思路:
通过正则匹配img标签抓取src并进行替换.
也可以使用第三方类似jquery的dom选择器进行处理
var baseUrl = 'https://xxxx.com'
/**
* 传入富文本字符串
*/
formatRichImg(content){
let re = /\<img.*?src=\"(.*?)\"/g;
let img_list = [] //所有图片地址,给后续预览图片使用
content = content.replace(re,(match,imgSrc) => {
// 在这里对图片路径进行加工
let src = baseUrl + imgSrc
img_list.push(src)
return '<img class="rich-img" src="'+src+'"'
})
return content
}
/deep/ rich-text .rich-img {
width: 100%;
height: auto;
}
更多推荐
已为社区贡献2条内容
所有评论(0)