网站结构与导航设计网站开发工程师资格证

微信小程序开发使用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 解决方案

将  替换为  即可

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