小程序text组件获取接口返回数据含\n但不能换行

312 阅读1分钟

小程序 \n 实现换行,在前端硬编码是可实现换行。但是如果从接口读取时返现页面上显示了 \n没有实现换行的效果。

产生原因:

数据库中 \n,转json后会变成\\n,所以不会换行。但是你看不到,因为前端拿到的时候这个都是\n

解决办法:

  1. 使用正则替换,借用小程序wxs
// filter.wxs 提供正则方法
var myFilter = function(text){
  if(text){
    console.log(text);
    //.要想匹配到\\n,正则表达式要用\\\\n,这是因为这里涉及到\的转义。
    var pattern = "\\\\n";
    var target = "\n";
    var reg = getRegExp(pattern, "g");
    return text.replace(reg, target);

  }
}
// 对外抛出此方法
module.exports = {
  filter_N:myFilter,
}
  1. 在wxml中引入wxs方法 <wxs src="../../../comm/wxs/filter.wxs" module="filterTools"></wxs>
  2. 使用过滤方法 在需要使用的地方 <text>{{filterTools.filter_N(couponItem.activity)}}</text>