当前位置：首页 > news >正文

微信小程序之富文本那些事

news 2025/8/25 15:33:12

文章目录

前言
一、video的处理
二、img的处理
总结

前言

小程序中使用富文本编辑器，由于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="))[^"]*/glet 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
完整代码

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="))[^"]*/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 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
}