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


Posted in Javascript onMarch 28, 2019

在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<'、‘>'、‘&'、‘空格'等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理。

1.官方API调用

这种方式,我们直接在wxml布局文件中,直接调用相关特殊符号的转义字符会无效,原因是小程序的text文本控件的decode属性没有打开导致的,看下文档说明:

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

从文档中,我们可以发现,decode属性默认为false,不会解析我们的特殊字符,我们通过设置decode属性为true,并且调用其转义字符即可实现该特殊字符的显示。

<text class='dialog-close' decode='true'>< 返回</text>

通过上述代码即可实现 < 返回 的效果。

其中:

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

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

2.通过JS文件来实现

除了上面的实现方法,针对一些特殊字符我们还可以通过wxml与JS文件相结合的方式来实现。

首先,在wxml文件中对text文本控件做如下设置:

<text class='dialog-close'>{{dialogback}}</text>

然后,我们在JS文件的data中设置其文本内容:

data: {
 dialogback:"< 返回",
 //... 其他配置
 }

通过这种方式也可以实现 < 返回 的效果。

示例

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

//替换URL中特殊字符
function replaceSpecialChar(url) {
 url = url.replace(/"/g, '"');
 url = url.replace(/&/g, '&');
 url = url.replace(/</g, '<');
 url = url.replace(/>/g, '>');
 url = url.replace(/ /g, ' ');
 console.log("转义字符", url);
 return url;
}
module.exports = {
 replaceSpecialChar: replaceSpecialChar
}

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

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

至此,微信小程序中关于转义字符的处理就基本实现了,如有问题,欢迎留言。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript while语句和do while语句的区别分析
Dec 08 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 #Javascript
详解Js里的for…in和for…of的用法
Mar 28 #Javascript
ES7之Async/await的使用详解
Mar 28 #Javascript
详解vue-cli3多环境打包配置
Mar 28 #Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 #Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 #Javascript
详解一个基于套接字实现长连接的express
Mar 28 #Javascript
You might like
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
详解vue 组件注册
2020/11/20 Vue.js
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
跟老齐学Python之变量和参数
2014/10/10 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
python 一维二维插值实例
2020/04/22 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
解决python3输入的坑——input()
2020/12/05 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
SQL数据库笔试题
2016/03/08 面试题
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
优秀团支部事迹材料
2014/02/08 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书