MeloGuo, • mini program
Back

微信小程序中转义字符的渲染问题

今天开发遇到了一个诡异的现象，后端返回的字符串中包含了 \n 转义字符。将其放在 <text> 组件下即可实现换行的效果。

但是将内容通过 setData 渲染到页面上后，\n 却变成了 \\n 。这就造成了二次转义，无法实现换行的效果，其他转义字符也是同样的现象。在查阅了相关资料后并没有发现微信小程序的相关解释，所以只能自己解决。

二次转义的操作发生在 wxml 文件中，所以只能使用 wxs 编写逻辑代码进行过滤。

<wxs module="textTool">
var myFilter = function(text) {
    if (text) {
        var pattern = "\\\\n";
        var target = "\n";
        var reg = getRegExp(pattern, "g");
        return text.replace(reg, target);
    }
}


module.exports = {
  filterN: myFilter
}
</wxs>

在需要进行过滤的地方使用此方法即可：

<wxs src=“../../util/wxs/text.wxs” module=“textTool” />


<view>{{textTool.filterN(text)}}</view>

著作权声明

本文作者 郭梓梁，首次发布于 MeloGuo Blog，转载请保留以上链接

GitHub · guoziliang199606@gmail.com · 微信
CC BY-NC 4.0 © Melo Guo.RSS