前言
小程序中使用富文本编辑器,由于rich-text受限 部分富文本内容无法渲染或排版错乱。以img和video为例,处理起来让人头疼。网上各种长篇大论,实际上没有任何帮助。接下来我们就一起聊聊img和video。
一、video的处理
因为rich-text不识别video,所以小程序端无法渲染。网上看很多都是下载插件处理,如果是一个单独视频 我个人觉得用正则匹配出来就行了,如果是富文本里面还穿插其他内容,可以试试插件。近期我们做的需求是把富文本里面的video拿出来单独渲染。
那么接下来我们就看看单独渲染如何处理吧。
此处是部分核心代码 并非完整案例代码
let htmlStr = '<p>测试题目解析的东西</p>↵<p><video controls="controls" width="300" height="150">↵<source src="https://scsf.oss-cn-shanghai.aliyuncs.com/tk/4d896a6e-f467-4a6d-bbc0-e30b5135db2f/bg.mp4" type="video/mp4"></video></p>'
let videoList = formatVideo(htmlStr )
const formatVideo = (htmlStr )=>{
if (!htmlStr ) return []
let srcReg = /(?<=(source[^>]src="))[^"]*/g
let videoList = htmlStr.match(srcReg) || []
return videoList
}
二、img的处理
说起img的处理 网上各种版本,网上大部分都是直接暴力 设置max-width跟height auto;看到后只想吐槽一句,‘兄弟,你这是用到实战项目上吗’ 。
img处理 包含三种情况
第一种 不带style
例如
let htmlStr = '<img src="...." />'
第二种 带style不包含width
例如
let htmlStr = '<img style="text-align:center" src="...."'
第三种 带style并且有style
例如
let htmlStr = '<img style="width:100px;height:30px;" src="...." />'
所以针对以上情况 分别进行处理就行。
第一步 判断是否包含style属性
let regExp = new RegExp('(i?)(<img)(?!(.*?style=[\'"](.*)[\'"])[^>]+>)', 'gmi')
第二步 取出style属性值。
let srcReg = /(?<=(<img[^>]style="))[^"]*/g
第三步 判断是否包含width
完整代码文章来源:https://www.toymoban.com/news/detail-615203.html
const formatRichTextInfo = (str, width) => {
var regExp = new RegExp('(i?)(<img)(?!(.*?style=[\'"](.*)[\'"])[^>]+>)', 'gmi')
let result = ''
if (regExp.test(str)) {
result = str.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
} else {
let srcReg = /(?<=(<img[^>]style="))[^"]*/g
let attributeList = str.match(srcReg) || []
if (attributeList && attributeList .length) {
if (attributeList [0].indexOf('width') != -1) {
result = str.replace(
/(<img[^>]*style="[^"]*?)(\bwidth\s*:\s*\d+[^;"]*?px;)(\s?height\s*:\s*\d+[^;"]*?px;)([^<]*\/>)/gi,
function (match, p1, p2, p3, p4) {
var widthValue = parseInt(p2.match(/\d+/)[0])
// var heightValue = parseInt(p3.match(/\d+/)[0])
if (widthValue > width) {
return p1 + `width: ${width}px; height: auto;` + p4
}
return match // 如果width小于等于375,则不做替换,保持原样
}
)
} else {
result = str.replace(/<img[^>]*>/gi, function (match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')
return match
})
result = result.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
result = result.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
}
} else {
result = str.replace(/<img[^>]*>/gi, function (match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')
return match
})
//再设置新的样式
result = result.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
result = result.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
}
}
return result
}
总结
不管是video还是img的处理 都是利用正则进行匹配。
img稍微麻烦一点 分为三种情况 没有style直接替换 有style则把style属性全部取出,然后判断是否包含width属性 如果包含 则需要给一个最大值进行替换 如果不包含 则把style重置 然后再手动赋个最大值。文章来源地址https://www.toymoban.com/news/detail-615203.html
到了这里,关于微信小程序之富文本那些事的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!