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

文章目录

  • 前言
  • 一、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
}

总结

不管是video还是img的处理 都是利用正则进行匹配。
img稍微麻烦一点 分为三种情况 没有style直接替换 有style则把style属性全部取出,然后判断是否包含width属性 如果包含 则需要给一个最大值进行替换 如果不包含 则把style重置 然后再手动赋个最大值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/12281.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

聊聊STM32的基本定时器

STM32 的基本定时器&#xff08;Basic Timer&#xff09;是一种简单的定时器模块&#xff0c;用于生成基于时钟频率的定时中断。它可以用于实现各种定时和计时功能&#xff0c;例如延时、频率测量、PWM 生成等。 基本定时器通常由一个 16 位的自由运行计数器和一个预分频器组成…

Mac代码编辑器sublime text 4中文注册版下载

Sublime Text 4 for Mac简单实用功能强大&#xff0c;是程序员敲代码必备的代码编辑器&#xff0c;sublime text 4中文注册版支持多种编程语言&#xff0c;包括C、Java、Python、Ruby等&#xff0c;可以帮助程序员快速编写代码。Sublime Text的界面简洁、美观&#xff0c;支持多…

Bad owner or permissions on ~/.ssh/config

错误原因&#xff1a;设置本地所有文件的权限为741等。。。 在执行ssh免密码登录时报如下的错误&#xff1a;Bad owner or permissions on ~/.ssh/config。 解决方案&#xff1a; chmod 600 ~/.ssh/config

Linux-open、read、write函数

1、open函数 #include<stdio.h> #include<unistd.h> //close函数头文件#include<sys/types.h> //open函数头文件 #include<sys/stat.h> //open函数头文件 #include<fcntl.h> //flags参数头文件//返回值为对应文件的描述符&#xff0c;打开失败返…

Kendo UI,一个加速Web应用界面开发的JavaScript组件库!

Kendo UI是什么&#xff1f; 首先&#xff0c;Kendo UI是一个由四个JavaScript UI库组成的包&#xff0c;这些库是专为jQuery、Angular、React和Vue原生构建的&#xff0c;每一个都是用一致的API和主题构建的。所以无论开发者怎么选择&#xff0c;所开发的Web应用始终保持了现…

this关键字和同步异步宏认为微任务理解

目录 js面试常见问题&#xff1a;1.this指向 2.闭包定义和作用 3.原型链 4.异步协程 this关键字 this主要有以下几个使用场合。 1&#xff09;全局环境 &#xff08;2&#xff09;构造函数 &#xff08;3&#xff09;对象的方法 避免多层this 避免数组处理方法中的 this 避免回…

推荐几个Windows iso镜像下载的网站

文章目录 1. 微软官网2. MSDN网站3. 系统库(xitongku)4. 其他网站最后总结 给大家推荐几个 Windows iso镜像下载网站 1. 微软官网 入口地址&#xff1a;https://www.microsoft.com/zh-cn/software-download 以下载Windows11为例&#xff1a; 1&#xff09;找到下载Windows11…

undefined reference to `__android_log_print‘

报错描述 在 Android NDK 相关的工程构建中&#xff0c;出现报错&#xff1a; undefined reference to __android_log_print’ 翻译成 QM 能理解的话&#xff1a; 在链接阶段&#xff0c; 遇到一个需要被链接的符号 __android_log_print, 但是没有在给出的依赖库里面找到 __an…

【LeetCode】114.二叉树展开为链表

题目 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同。 示例 1&…

day43-Spring_IOC

0目录 1.2.3 1. Spring_IOC 1.1 定义&#xff1a;轻量级框架&#xff0c;java EE的春天&#xff0c;主流框架 1.2 Spring特性&#xff1a;IOC控制反转&#xff1b;AOP面相切面 1.3 组成部分&#xff1a;Spring在SSM中所起到的作用&#xff08;SpringMVC和Mybatis框架的黏…

MySQL中GROUP_CONCAT()的介绍和用法

摘要&#xff1a;本文详细介绍MySQL数据库中GROUP_CONCAT()函数的概念和用法。通过示例和输出结果展示如何使用GROUP_CONCAT()函数将分组后的数据以字符串形式拼接起来&#xff0c;帮助读者更好地理解和应用这一功能。 1. 什么是GROUP_CONCAT() GROUP_CONCAT()是MySQL数据库提…

C程序设计:基于双向链表的flash磨损平衡算法

1.flash磨损平衡算法的重要性 Flash磨损平衡算法是一种用于管理和均衡闪存存储器中数据分布的算法。由于闪存存储器的特性&#xff0c;比如有限的擦写次数和块擦除的要求&#xff0c;长时间不进行数据的平衡处理可能会导致某些块的擦写次数明显超过其他块&#xff0c;造成闪存…

vue2企业级项目(五)

vue2企业级项目&#xff08;五&#xff09; 页面适配、主题切换 1、适配 项目下载插件 npm install --save-dev style-resources-loader vue-cli-plugin-style-resources-loader修改vue.config.js部分内容 const path require("path");module.exports {pluginOpt…

flutter 打包iOS安装包

flutter iOS Xcode打包并导出ipa文件安装包 1、 Xcode配置 1、 启动打包 1、 等待打包 1、 打包完成、准备导出ipa 1、 选择模式 1、 选择配置文件 1、 导出 1、 选择导出位置 1、 得到ipa

于大模型迁移中学习 Docker

最近在做大模型的昇腾迁移&#xff0c;国产化框架踩坑不少&#xff0c;基本一天的工作量相当于之前做纯视觉算法时一周踩过的坑数了。 现在在modelarts上用八卡昇腾910跑llama&#xff0c;不同于之前自己配环境&#xff0c;昇腾生态创新中心都是用的镜像&#xff0c;虽说打包起…

区分jdbcTemplate操作数据库和mybatis操作数据库

JdbcTemplate和MyBatis是Java中常用的两种数据库操作方式。它们在实现上有一些区别&#xff0c;下面我将为你介绍它们的主要特点和区别&#xff1a; JdbcTemplate&#xff1a; JdbcTemplate是Spring框架中提供的一个类&#xff0c;用于简化JDBC操作。使用JdbcTemplate时&#x…

【业务功能篇58】Springboot + Spring Security 权限管理 【下篇】

4.2.2.3 SpringSecurity工作流程分析 SpringSecurity的原理其实就是一个过滤器链&#xff0c;内部包含了提供各种功能的过滤器。这里我们可以看看入门案例中的过滤器。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KjoRRost-1690534711077)(http…

机器学习分布式框架ray tune笔记

Ray Tune作为Ray项目的一部分&#xff0c;它的设计目标是简化和自动化机器学习模型的超参数调优和分布式训练过程。Ray Tune简化了实验过程&#xff0c;使研究人员和数据科学家能够高效地搜索最佳超参数&#xff0c;以优化模型性能。 Ray Tune的主要特点包括&#xff1a; 超参…

数字信号处理中的基本运算——加法运算

1. 一位全加器 2. 二进制加法原理 两个N位二进制补码相加&#xff0c;为防止溢出时导致计算结果错误&#xff0c;可将这两个加数先进行符号位扩展&#xff0c;变为N1位二进制数&#xff0c;然后相加&#xff0c;结果亦取N1位&#xff0c;可保证运算结果正确。 根据多位加法器…

android存储4--初始化.emulated设备的挂载

android版本&#xff1a;android-11.0.0_r21http://aospxref.com/android-11.0.0_r21 android手机的挂载非常复杂。这篇文章针对emulated存储&#xff0c;介绍它的挂载过程。 一、为什么emulted存储要用很复杂的挂载方式 1&#xff0c; emulted存储是什么 android早期&#…