二级栏目网站,有赞微商城官网,工程建设专业,建设网站是要先建站在备案么文章目录 前言一、video的处理二、img的处理总结 前言
小程序中使用富文本编辑器#xff0c;由于rich-text受限 部分富文本内容无法渲染或排版错乱。以img和video为例#xff0c;处理起来让人头疼。网上各种长篇大论#xff0c;实际上没有任何帮助。接下来我们就一起聊聊im… 文章目录 前言一、video的处理二、img的处理总结 前言
小程序中使用富文本编辑器由于rich-text受限 部分富文本内容无法渲染或排版错乱。以img和video为例处理起来让人头疼。网上各种长篇大论实际上没有任何帮助。接下来我们就一起聊聊img和video。 一、video的处理
因为rich-text不识别video,所以小程序端无法渲染。网上看很多都是下载插件处理如果是一个单独视频 我个人觉得用正则匹配出来就行了如果是富文本里面还穿插其他内容可以试试插件。近期我们做的需求是把富文本里面的video拿出来单独渲染。 那么接下来我们就看看单独渲染如何处理吧。 此处是部分核心代码 并非完整案例代码
let htmlStr p测试题目解析的东西/p↵pvideo controlscontrols width300 height150↵source srchttps://scsf.oss-cn-shanghai.aliyuncs.com/tk/4d896a6e-f467-4a6d-bbc0-e30b5135db2f/bg.mp4 typevideo/mp4/video/p
let videoList formatVideo(htmlStr )
const formatVideo (htmlStr ){if (!htmlStr ) return []let srcReg /(?(source[^]src))[^]*/glet videoList htmlStr.match(srcReg) || []return videoList
}二、img的处理
说起img的处理 网上各种版本网上大部分都是直接暴力 设置max-width跟height auto;看到后只想吐槽一句‘兄弟你这是用到实战项目上吗’ 。 img处理 包含三种情况 第一种 不带style 例如
let htmlStr img src.... /第二种 带style不包含width 例如
let htmlStr img styletext-align:center src....第三种 带style并且有style 例如
let htmlStr img stylewidth:100px;height:30px; src.... /所以针对以上情况 分别进行处理就行。 第一步 判断是否包含style属性 let regExp new RegExp((i?)(img)(?!(.*?style[\](.*)[\])[^]), gmi)第二步 取出style属性值。
let srcReg /(?(img[^]style))[^]*/g第三步 判断是否包含width 完整代码
const formatRichTextInfo (str, width) {var regExp new RegExp((i?)(img)(?!(.*?style[\](.*)[\])[^]), gmi)let result if (regExp.test(str)) {result str.replace(/\img/gi, img stylemax-width:100%;height:auto;)} else {let srcReg /(?(img[^]style))[^]*/glet 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 stylemax-width:100%;height:auto;)result result.replace(/\img/gi, img stylemax-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 stylemax-width:100%;height:auto;)result result.replace(/\img/gi, img stylemax-width:100%;height:auto;)}}return result
}总结
不管是video还是img的处理 都是利用正则进行匹配。 img稍微麻烦一点 分为三种情况 没有style直接替换 有style则把style属性全部取出然后判断是否包含width属性 如果包含 则需要给一个最大值进行替换 如果不包含 则把style重置 然后再手动赋个最大值。
