微信小程序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;')
相关推荐
Ama_tor2 小时前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
毛毛三由11 小时前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++
一只一只妖13 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
编程毕设14 小时前
基于小程序的智能停车管理系统设计与开发
小程序
Kelaru16 小时前
本地Qwen中医问诊小程序系统开发
python·ai·小程序·flask·project
初晨未凉17 小时前
uniapp返回webview返回小程序并且跳转回webview
小程序·uni-app
Python智慧行囊20 小时前
微信小程序交互精髓:点击操作与状态管理实战
微信小程序·小程序·交互
铲子Zzz1 天前
Java使用接口AES进行加密+微信小程序接收解密
java·开发语言·微信小程序
paopaokaka_luck2 天前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序