微信小程序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;')
相关推荐
666HZ6662 小时前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
二十十十十十3 小时前
微信点餐小程序—美食物
微信·小程序
向明天乄3 小时前
在小程序中实现实时聊天:WebSocket最佳实践
websocket·网络协议·小程序
h185385922443 小时前
租车小程序电动车租赁小程序php方案
小程序
海的诗篇_3 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
说私域3 小时前
基于开源AI智能客服、AI智能名片与S2B2C商城小程序的微商服务质量提升路径研究
人工智能·小程序·开源
牧杉-惊蛰4 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
拼图2099 小时前
微信小程序——skyline版本问题
微信小程序·小程序
mg66810 小时前
微信小程序入门实例_____打造你的专属单词速记小程序
微信小程序·小程序
程序员陆通10 小时前
Vibe Coding开发微信小程序实战案例
微信小程序·小程序·notepad++·ai编程