微信小程序之富文本特殊处理
文章目录
- 前言
- 一、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重置 然后再手动赋个最大值。
相关文章:
微信小程序之富文本特殊处理
文章目录 前言一、video的处理二、img的处理总结 前言 小程序中使用富文本编辑器,由于rich-text受限 部分富文本内容无法渲染或排版错乱。以img和video为例,处理起来让人头疼。网上各种长篇大论,实际上没有任何帮助。接下来我们就一起聊聊im…...
react-draft-wysiwyg富文本编辑器
在React项目中使用 yarn add react-draft-wysiwyg draft-js or npm i react-draft-wysiwyg draft-js推荐在项目中单独创建一个富文本编辑器组件 import { Editor } from "react-draft-wysiwyg"; import { EditorState, convertToRaw, ContentState } from draft-js…...
P5721 【深基4.例6】数字直角三角形
【深基4.例6】数字直角三角形 题目描述 给出 n n n,请输出一个直角边长度是 n n n 的数字直角三角形。所有数字都是 2 2 2 位组成的,如果没有 2 2 2 位则加上前导 0 0 0。 输入格式 输入一个正整数 n n n。 输出格式 输出如题目要求的数字直…...
【电子设计大赛】2023 年全国大学生电子设计竞赛 仪器和主要元器件清单
2023 年全国大学生电子设计竞赛仪器设备和主要元器件及器材清单 [本科组] 1. 仪器设备清单 直流稳压电源(具有恒流/恒压模式自动切换功能,0~30V/3A,双路) 数字示波器(100MHz, 双通道) 函数发…...
(八九)如何与InfluxDB交互InfluxDB HTTP API
以下内容来自 尚硅谷,写这一系列的文章,主要是为了方便后续自己的查看,不用带着个PDF找来找去的,太麻烦! 第 8 章 前言:如何与InfluxDB交互 1、InfluxDB启动后,会向外提供一套HTTP API。外部程…...
excel 生成sql技巧
"update 表名 set 字段名"&A2&" where 字段名"&B2&";"...
2023牛客暑期多校训练营2(D/E/F/H/I/K)
目录 D.The Game of Eating E.Square F.Link with Chess Game H.0 and 1 in BIT I.Link with Gomoku K.Box D.The Game of Eating 思路:倒着贪心。因为正着贪会导致一种局面:我选了当前喜爱值最大的菜,但是就算我不选这个菜࿰…...
Ubuntu搭建Samba服务-学习记录
文章目录 Ubuntu安装Samba流程Samba配置文件Samba添加账户配置文件修改Samba服务控制设置开机自动启动通过systemctl 启动服务通过 rc.local 启动 Windows访问参考链接 当前文章仅用于记录,在 Ubuntu中安装使用Samba,在Windows访问 系统环境:…...
Unity Shader - if 和 keyword 的指令比较
文章目录 环境TestingIf4Sampleunity shaderlab 中的 TestingIf4Sample.shadergraphics analyzer 中的 TestingIf4Sample.glsl TestingKW4Sampleunity shaderlab 中的 TestingKW4Sample.shadergraphics analyzer 中的 TestingKW4Sample.glsl 比较 环境 Unity : 2020.3.37f1 Pi…...
【C++入门到精通】C++入门 —— 类和对象(了解类和对象)
目录 一、类和对象的历史由来 二、面向过程和面向对象的初步认识 三、类 1.引子 2.类的定义 3.类的访问限定符及封装 ⭕访问限定符 🚩访问限定符解释说明 🚩struct 与 class 的区别 1. 默认访问级别: 2. 继承权限(默认的…...
DRS 迁移本地mysql 到华为云
准备工作: 源端的IP地址(公网),用户明和密码。如果通过公网迁移,需要在安全组放通drs访问源端数据库的3306端口。目标端的IP地址,用户名和密码。 创建DRS迁移任务 创建迁移任务 登录华为云控制台。单击管…...
腾讯云 Cloud Studio 实战训练营——快速构建React完成点餐H5页面
目录 编辑 一、前言 1、什么是腾讯云 Cloud Studio 2、本文实验介绍 二、前期准备工作 1、注册 Cloud Studio 2、初始化工作空间 三、开发一个简版的点餐系统页面 1、安装依赖 1.1、安装 antd-mobile 1.2、安装 less 和 less-loader 1.3、暴露 webpack 配置文件 …...
在 React 中,props(属性)用于在组件之间传递数据
在 React 中,props(属性)用于在组件之间传递数据。它是父组件向子组件传递信息的一种方式,通过 props,父组件可以向子组件传递数据、回调函数、配置项等。 注意: props 是只读的,它的值由父组件…...
Unity实现camera数据注入RMP推送或轻量级RTSP服务模块
技术背景 随着技术的不断进步和应用的不断深化,Unity3D VR应用的前景非常广阔,它广泛应用于教育、医疗、军事、工业设计、虚拟数字人等多个领域。 教育领域:Unity3D VR技术可以用来创建虚拟现实教室,让学生能够身临其境地体验课…...
CVPR2023新作:3D感知的AI换脸算法
Title: 3D-Aware Face Swapping (3D感知的人脸交换) Affiliation: 上海交通大学人工智能研究所 Authors: Yixuan Li, Chao Ma, Yichao Yan, Wenhan Zhu, Xiaokang Yang Keywords: Face swapping, 3D human faces, Generative Adversarial Network, geometry Summary: (1):…...
Android安卓实战项目(4)---提供给阿尔兹海默症患者的APP(源码在文末)
Android安卓实战项目(4)—提供给阿尔兹海默症患者的APP(源码在文末) 一.项目运行介绍 1.大致浏览 (1)开机界面 (2)主界面 (3)Read Instructions界面 &…...
详解Mybatis之自动映射 自定义映射问题
编译软件:IntelliJ IDEA 2019.2.4 x64 操作系统:win10 x64 位 家庭版 Maven版本:apache-maven-3.6.3 Mybatis版本:3.5.6 文章目录 一、Mybatis中的自动映射是什么?二、Mybatis中的自定义映射是什么?三、为什…...
shiro的优点
shiro是一个强大的java安全框架,它的优点有以下: shiro就是权限管理:包括两部分:身份验证、授权 一、它提供了身份验证、授权、密码和会话管理等功能,可以满足各种应用程序的安全需求。 身份认证就是:验证是…...
使用分布式HTTP代理爬虫实现数据抓取与分析的案例研究
在当今信息爆炸的时代,数据已经成为企业决策和发展的核心资源。然而,要获取大规模的数据并进行有效的分析是一项艰巨的任务。为了解决这一难题,我们进行了一项案例研究,通过使用分布式HTTP代理爬虫,实现数据抓取与分析…...
Linux操作系统运维常用集合
目录 1、服务器磁盘查询、管理常见命令: 2、Centos系统挂载移动硬盘或U盘 3、Linux系统磁盘管理方式 4、Linux系统下挂载磁盘格式详解 1、服务器磁盘查询、管理常见命令: lsblk 查看分区和磁盘df -h …...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点:传参类型必须是类对象 一、BigInteger 1. 作用:适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
MFC 抛体运动模拟:常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...
免费数学几何作图web平台
光锐软件免费数学工具,maths,数学制图,数学作图,几何作图,几何,AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡
何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡 背景 我们以建设星云智控官网来做AI编程实践,很多人以为AI已经强大到不需要程序员了,其实不是,AI更加需要程序员,普通人…...
SQL进阶之旅 Day 22:批处理与游标优化
【SQL进阶之旅 Day 22】批处理与游标优化 文章简述(300字左右) 在数据库开发中,面对大量数据的处理任务时,单条SQL语句往往无法满足性能需求。本篇文章聚焦“批处理与游标优化”,深入探讨如何通过批量操作和游标技术提…...
数据挖掘是什么?数据挖掘技术有哪些?
目录 一、数据挖掘是什么 二、常见的数据挖掘技术 1. 关联规则挖掘 2. 分类算法 3. 聚类分析 4. 回归分析 三、数据挖掘的应用领域 1. 商业领域 2. 医疗领域 3. 金融领域 4. 其他领域 四、数据挖掘面临的挑战和未来趋势 1. 面临的挑战 2. 未来趋势 五、总结 数据…...
项目研究:使用 LangGraph 构建智能客服代理
概述 本教程展示了如何使用 LangGraph 构建一个智能客服代理。LangGraph 是一个强大的工具,可用于构建复杂的语言模型工作流。该代理可以自动分类用户问题、分析情绪,并根据需要生成回应或升级处理。 背景动机 在当今节奏飞快的商业环境中,…...
