微信小程序rich-text 文本首行缩进和图片居中和富文本rich-text 解析多个空格不成功 nbsp

微信小程序开发使用rich-text组件渲染html格式的代码,常常因为不能自定义css导致文本不能缩进,以及图片不能居中等问题,这里可以考虑使用js的replace方法,替换字符串,然后在渲染的同时加载行内样式。

//获取字符串的图片路径并替换
let content = res.data.articleVo.content
let re = /<img [^>]*src=['"]([^'"]+)[^>]*>/gi;
let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配图片中的src
let reHttp = new RegExp("http");
let imgArr = content.match(re);
for (let i = 0; i < imgArr.length; i++) {let imgSrc = imgArr[i].match(srcReg);if (!reHttp.test(imgSrc[1])) {content = content.replaceAll(imgSrc[1], URL.imghhx + imgSrc[1]);}
}
//先去掉本身的style
const regex = new RegExp('style="max-width:100%;" ', 'gi');
let contentIMg  = content.replace(regex, '');
//文本首行缩进和图片居中
let article = contentIMg.replace(/(\<img|\<p)/gi, function ($0, $1) {return {"<img": '<img style="width:100%;height:auto;display:block;" ',"<p": '<p style="text-indent: 24px;" ',"<article": "<div","</article": "</div","<header": "<div","</header": "</div"} [$1];
});  

小程序富文本rich-text 解析多个空格不成功 &nbsp 解决方案

&nbsp; 替换为 &ensp;即可

let str = '<p>&ensp; &ensp; 今天是阳光明媚的一天</p>'.replace(/&nbsp;/g, '&ensp;')

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

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

相关文章

基于ssm+vue交通事故档案系统

摘要 摘要是对文章、论文或其他文本的主要观点、结论和关键信息的简洁概括。由于你没有提供具体的文章或主题&#xff0c;我将为你创建一个通用的摘要。 本文介绍了一种基于SSM&#xff08;Spring Spring MVC MyBatis&#xff09;和Vue.js的交通事故档案管理系统的设计与实现…

NewStarCTF2023 Reverse方向Week3 ez_chal WP

分析 题目&#xff1a;ez_chal 一个XTEA加密&#xff0c; V6是key&#xff0c;v5是输入&#xff0c;然后v7就是密文。 看了v6&#xff0c;要用动调。 ELF文件用ida的远程调试。 然后在kali上输入长度为32的flag 全部转换成dd 再提取密文。 EXP #include <stdio.h>…

解决java发邮件错误javax.net.ssl.SSLHandshakeException: No appropriate protocol

java发送邮件时报以下错误信息&#xff1a; javax.net.ssl.SSLHandshakeException: No appropriate protocol (protocol is disabled or cipher [com.bm6api.controller.v1.AppUserController] - sendLoginAuthCodeMail 发送登录验证码邮件 : {"code":200,"inf…

Spring框架中的bean管理(XML和注解及属性的注入)

Spring框架中IOC就是将创建对象的权力反转给Spring框架&#xff0c;我们无需自己创建对象&#xff0c;直接在Spring框架的容器中获取即可。 bean中配置的就是需要让Spring管理的类。 XML的bean管理 先写个“HelloWorld”: <bean id"User" class"com.ffyc.…

面试经典(2/150)移除元素

面试经典(2/150)移除元素 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要…

mysql统计整个数据库记录条数

SELECTSUM(TABLE_ROWS) FROM(SELECTTABLE_NAME,TABLE_ROWSFROMINFORMATION_SCHEMA.TABLESWHERETABLE_SCHEMA 数据库名&#xff0c;其他不变) t;效果如下&#xff1a;

单片机FLASH下载算法的制作

环境 硬件使用正点原子STM32F407探索者V2开发板 编程环境使用MDK 下载工具使用JLINK FLASH芯片使用W25Q128 什么是下载算法 单片机FLASH的下载算法是一个FLM文件&#xff0c;FLM通过编译链接得到&#xff0c;其内部包含一系列对FLASH的操作&#xff0c;包括初始化、擦除、写…

demo(三)eurekaribbonhystrix----服务降级熔断

一、介绍&#xff1a; 1、雪崩&#xff1a; 多个微服务之间调用的时候&#xff0c;假如微服务A调用微服务B和微服务C&#xff0c;微服务B和微服务C又调用其他的微服务&#xff0c;这就是所谓的"扇出"。如果扇出的链路上某个微服务的调用响应的时间过长或者不可用&am…

【Android】设置全局标题栏

序言 在做项目的时候&#xff0c;有时候需要一个全局统一的标题栏&#xff0c;保证项目风格的统一&#xff0c;但是如果在每个activity上面都写一遍这个标题栏就很麻烦了&#xff0c;我们经常用的方法就是写个基类Activity&#xff0c;然后当某个Activity需要这个统一的标题栏…

web 服务

作业&#xff1a;请给openlab搭建web网站 网站需求&#xff1a; 1.基于域名 www.openlab.com 可以访问网站内容为 welcome to openlab!!! 2.给该公司创建三个子界面分别显示学生信息&#xff0c;教学资料和缴费网站&#xff0c; 1、基于 www.openlab.com/student 网站访问学生信…

简单解决网页的验证码

翻到一个网站,展开需要验证码,而验证码需要关注微信公众号,懒得弄,所以有了这篇文章 首先,先看一下F12中的网络(Network),发现并没有使用网络动态验证 那么这个验证码必定是写在资源文件中的 在确定按钮上看到如下元素监听(Event Listeners) 进入打断点 成功断下 单步跟到…

JSplacement丨随机生成置换贴图

界面很简单&#xff0c;虽然是英文&#xff0c;但基本也能看懂&#xff0c;参数调一调&#xff0c;随机生成不重复的8K高清图片。 这种图片可能对普通人感觉很奇怪&#xff0c;有什么用呢&#xff1f;会C4D建模渲染的同学应该会明白&#xff0c;特别是建一些科技类的场景背景&a…

[C/C++]数据结构 链表OJ题:随机链表的复制

题目描述: 给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成&#xff0c;其中每个新节点的值都设为其对应的原节点的值。新…

【AI视野·今日NLP 自然语言处理论文速览 第六十二期】Wed, 25 Oct 2023

AI视野今日CS.NLP 自然语言处理论文速览 Wed, 25 Oct 2023 (showing first 100 of 112 entries) Totally 100 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers MuSR: Testing the Limits of Chain-of-thought with Multistep Soft R…

为开发GPT-5,OpenAI向微软寻求新融资

11月14日&#xff0c;金融时报消息&#xff0c;OpenAI正在向微软寻求新一轮融资&#xff0c;用于开发超级智能向AGI&#xff08;通用人工智能&#xff09;迈进&#xff0c;包括最新模型GPT-5。 最近&#xff0c;OpenAI召开了首届开发者大会&#xff0c;推出了GPT-4 Turbo、自定…

设计模式-10-观察者模式

经典的设计模式有23种&#xff0c;但是常用的设计模式一般情况下不会到一半&#xff0c;我们就针对一些常用的设计模式进行一些详细的讲解和分析&#xff0c;方便大家更加容易理解和使用设计模式。 23种经典的设计模式分为三类&#xff1a;创建型、结构型、行为型。前面我们已经…

大数据基础设施搭建 - Hadoop

文章目录 一、下载安装包二、上传压缩包三、解压压缩包四、配置环境变量五、测试Hadoop5.1 测试hadoop命令5.2 测试wordcount案例5.2.1 创建wordcount输入文本信息5.2.2 执行程序5.2.3 查看结果 六、分发压缩包到集群中其他机器6.1 分发压缩包6.2 解压压缩包6.3 配置环境变量 七…

视频一键转码:批量转换MP4视频的技巧

随着数字媒体设备的普及&#xff0c;视频文件在生活中扮演着越来越重要的角色。而在处理视频文件时&#xff0c;有时需要将其转换为不同的格式以适应不同的需求。其中&#xff0c;MP4格式因其通用性和高质量而备受青睐。本文详解云炫AI智剪如何一键转码的技巧&#xff0c;帮助批…

在webstorm中配置sass编译环境

1.下载ruby 下载地址&#xff1a;ruby下载 2.安装ruby 下载之后&#xff0c;有一个exe安装包 双击exe文件 &#xff0c;并选择自己的安装位置&#xff08;这个位置一定要记得&#xff0c;需要在webstorm中使用&#xff09;。其他的步骤默认安装即可。 3.安装sass ruby安装成功后…

van-popup滑动卡顿并且在有时候在ios上经常性滑动卡顿的情况

解决”pc端页面可以滚动&#xff0c;移动端手势无法滚动“问题的一次经历 - 掘金 <van-popup v-model"studentclassShow" :lock-scroll"false" position"bottom" style"z-index: 3000" :style"{ height: 55% }"><d…