微信小程序特殊字符转义的处理方法

春哥团队技术虎子在编写公司小程序的过程中,经常会遇到小问题,有一次在网页端添加了一张图片,结果在小程序端访问失败了,究其原因,竟然是因为该图片名称中有一个“&”符号,网页端添加后,自动转义成了“&”存储到了数据库。
当然,这种格式如果是在HTML去访问图片地址,会自动在转义成“&”,但是小程序的WXML并没有这种功能,所以这就需要我们在小程序端自行操作进行转义了。如何处理这些问题?

首先,明确一下会自动转义存储的常用的特殊字符有哪些:

如果是在<text>标签中显示文本内容,可以直接通过设置decode=‘true’的属性进行转义。 

但因为我是在<image>标签中访问,所以小程序中没有便捷方法可以转义,写了一个死方法——replace.js,如下:

复制代码
//替换URL中特殊字符
function replaceSpecialChar(url) {
  url = url.replace(/&quot;/g, '"');
  url = url.replace(/&amp;/g, '&');
  url = url.replace(/&lt;/g, '<');
  url = url.replace(/&gt;/g, '>');
  url = url.replace(/&nbsp;/g, ' ');
  console.log("转义字符", url);
  return url;
}
module.exports = {
  replaceSpecialChar: replaceSpecialChar
}
复制代码

需要用到的时候,在页面对应的js里面调用该方法:

var replace = require("../../utils/replace.js");
Page({
    ..............
    url = replace.replaceSpecialChar(res.data.url)
})

这样就能访问到图片啦~~~希望对遇到同样问题的朋友们,有所帮助!
 

来源:春哥技术博客,欢迎分享,(春哥微信号:cgnanyin)
上一篇:小程序刚刚内测新能力,开发者:终于等到      下一篇:SwitchHosts—快速切换本地 hosts 的