微信小程序 展示HTML遇到的坑

140 阅读1分钟

以下是我从接口中获取到的HTML:

<div style='font-size:50px;color:#000000'>
    增高:肾功能不全。
    <br> 
    <br> 
    【参考值调整通知】
    <br>
    2019年5月1日起血清肌酐(Crea)参考范围调整为
    <br>
    男:57~97(<60岁);57~111(≥60 岁) 
    <br>
    女:41~73(<60岁);41~81(≥60 岁) 
    <br>
    单位:μmol/L 
    <p align=center>
        <a style='font-size:50pt;color:#0000FF;text-decoration:underline;' href='http://www.wwhospital.com/html/jyk_wxts.htm'>
            点击查看更多检验/检查相关公告
        </a>
    </p>
</div>

直接将其通过rich-text的nodes属性展示,效果如下图所示:

image.png

那么问题来了,除了HTML标签,从第一个"<"符号开始,后面的内容都不会展示。

这个问题的解决办法就是将"<"符号进行转义:&lt;

如果只是将"<"符号进行转义:html = html.replace(/[<]/ig,'&lt;');,那么HTML标签也会受到影响,文本将会完全乱掉。

所以我们要缩小转义的范围,只需要将数字前面的"<"符号进行转义。

改良的替换方法如下: html = html.replace(/[<]([0-9])/ig,'&lt;$1');

噔噔噔噔~~~

最后需要的效果就出来啦!!!

image.png