• 微信小程序rich-text 文本首行缩进和图片居中和富文本rich-text 解析多个空格不成功 &nbsp


    微信小程序开发使用rich-text组件渲染html格式的代码,常常因为不能自定义css导致文本不能缩进,以及图片不能居中等问题,这里可以考虑使用js的replace方法,替换字符串,然后在渲染的同时加载行内样式。

    1. //获取字符串的图片路径并替换
    2. let content = res.data.articleVo.content
    3. let re = /<img [^>]*src=['"]([^'"]+)[^>]*>/gi;
    4. let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配图片中的src
    5. let reHttp = new RegExp("http");
    6. let imgArr = content.match(re);
    7. for (let i = 0; i < imgArr.length; i++) {
    8. let imgSrc = imgArr[i].match(srcReg);
    9. if (!reHttp.test(imgSrc[1])) {
    10. content = content.replaceAll(imgSrc[1], URL.imghhx + imgSrc[1]);
    11. }
    12. }
    13. //先去掉本身的style
    14. const regex = new RegExp('style="max-width:100%;" ', 'gi');
    15. let contentIMg = content.replace(regex, '');
    16. //文本首行缩进和图片居中
    17. let article = contentIMg.replace(/(\
    18. return {
    19. "<img": '100%;height:auto;display:block;" ',
    20. "<p": '

      24px;" ',

    21. "<article": "<div",
    22. "</article": "</div",
    23. "<header": "<div",
    24. "</header": "</div"
    25. } [$1];
    26. });

    小程序富文本rich-text 解析多个空格不成功   解决方案

      替换为 即可

    let str = '

        今天是阳光明媚的一天

    '
    .replace(/&nbsp;/g, ' ')

  • 相关阅读:
    【单例模式 Objective-C语言】
    HTTP协议
    剑指 Offer 10- I. 斐波那契数列
    矩阵分解PCA,SVD
    四、Web开发
    boost 之计算机的时间-chrono
    求SM16106SC如何连接驱动四位数码管
    [java刷算法]牛客—剑指offer插入排序、双指针解题
    C++ 之 constexpr详解
    Springboot使用定时任务scheduler详解
  • 原文地址:https://blog.csdn.net/coldriversnow/article/details/134433801