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


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 相关文章推荐
Jquery下判断Id是否存在的代码
Jan 06 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
JavaScript执行机制详细介绍
Dec 06 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
php debug 安装技巧
2011/04/30 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
浅谈php和.net的区别
2014/09/28 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
基于Python对数据shape的常见操作详解
2018/12/25 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
详解HTML5新增标签
2017/11/27 HTML / CSS
我未来的职业规划范文
2014/01/11 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
数学教育专业求职信
2014/07/22 职场文书
继续教育个人总结
2015/03/03 职场文书
银行自荐信怎么写
2015/03/05 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫