微信小程序开发使用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(/(\
- return {
- "<img": '100%;height:auto;display:block;" ',
- "<p": '
24
px;" ', - "<article": "<div",
- "</article": "</div",
- "<header": "<div",
- "</header": "</div"
- } [$1];
- });
小程序富文本rich-text 解析多个空格不成功   解决方案
将
替换为
即可
let str = ' 今天是阳光明媚的一天
'.replace(/ /g, ' ')