全球展览设计的图片,企业网站建设优化策划,怎么做网站架构图,微商代理网微信小程序开发使用rich-text组件渲染html格式的代码#xff0c;常常因为不能自定义css导致文本不能缩进#xff0c;以及图片不能居中等问题#xff0c;这里可以考虑使用js的replace方法#xff0c;替换字符串#xff0c;然后在渲染的同时加载行内样式。
//获取字符串的图…微信小程序开发使用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(stylemax-width:100%; , gi);
let contentIMg content.replace(regex, );
//文本首行缩进和图片居中
let article contentIMg.replace(/(\img|\p)/gi, function ($0, $1) {return {img: img stylewidth:100%;height:auto;display:block; ,p: p styletext-indent: 24px; ,article: div,/article: /div,header: div,/header: /div} [$1];
});
小程序富文本rich-text 解析多个空格不成功 nbsp 解决方案
将nbsp; 替换为 ensp;即可
let str pensp; ensp; 今天是阳光明媚的一天/p.replace(/nbsp;/g, ensp;)
