js 转义字符及URI编码详解


Posted in Javascript onFebruary 28, 2017

URL中的转义字符

当URL的参数中出现诸如+,空格,/,?,%,#,&,=等特殊字符串符号时,因为上述字符有特殊含义,导致服务器端无法正确解析参数,如何处理?解决办法:将这些字符转化成服务器可以识别的字符。

如果要在URL中传递特殊符号的原本意义,要对他们进行编码。编码的格式为:%加字符的ASCII码(16进制),例如空格的编码值是"%20"。

URL中特殊符号的用途及普通意义的编码

+ URL 中+号表示空格 %2B
空格 URL中的空格可以用+号或者编码 %20
/ 分隔目录和子目录 %2F
? 分隔实际的URL和参数 %3F
% 指定特殊字符 %25
# 表示书签 %23
& URL 中指定的参数间的分隔符 %26
= URL 中指定参数的值 %3D

HTML中的转义字符

转义字符串(Escape Sequence)也称字符实体(Character Entity)。在HTML中,“<”和“>”符号用来表示HTML标签,不能当作普通的符号来使用。如果要在HTML文档中使用这些特殊符号原有的意义,就需要定义对应的转义字符串。当浏览器遇到这类转义字符时就会解释为真实的字符而不是特殊用途。另外有些字符在ASCII字符集中没有文字代号,只能用转义字符串来表示,如回车换行符,退格键等。

字符 十进制 转义字符
" " "
& & &
< <
> >
不断开空格(non-breaking space)    

JavaScript中的转义

JavaScript 中有些字符有特殊用途,如果字符串中想使用这些字符原来的含义,需要使用反斜杠对这些特殊符号进行转义。

正则中也有需要转义的字符:* . ? + $ ^ [ ] ( ) { } | \ /,也是通过\反斜杠进行转义。但是中括号里并不是元字符,不需要转义。

在js中字符串形式的正则表达式匹配一个反斜杠要用四个反斜杠'\\\\', 第一个斜杠是js字符串的转义符,第二个斜杠是斜杠本身,第三个斜杠是js字符串的转义符,第四个斜杠是斜杠本身。将第二、四个反斜杠转为正则中的斜杠后,前面一个为正则中的转义符,将后者变为普通符号。字符串形式的正则表达式里的斜杠也是特殊符号,若要当普通符号使用,也需要转义,用“\\”标示。因为js中反斜扛为特殊符号(转义字符),js字符串里面表示斜杠需要一次转义:“\\”。

在比如:字面量形式/\{.*\}/---->字符串形式'\\{.*\\}'。因为{号为正则中的特殊符号,需要加\转义,而字符串中的\又是js中的特殊符号,需要再加一个\进行转义。

注意正则的字面量形式只需要对正则中的特殊符号转义,不需要对js的特殊符号转义。

代码 输出的普通字符
\' 单引号
\" 双引号
\& 和号
\\ 反斜杠
\n 换行符
\r 回车符
\t 制表符
\b 退格符
\f 换页符

js中对字符串进行编码的方法

1.encodeURI()把字符串作为 URI整体进行编码,所以URI组件中的特殊分隔符号(;/:@&=+$?#),encodeURI() 函数不会进行转义。该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( )

encodeURI("http://www.w3school.com.cn")

输出http://www.w3school.com.cn

2.encodeURIComponent()把字符串作为 URI 组件的一部分(如path/query/fragment等)进行编码,所以用于分隔 URI 各个部分的特殊分隔符号(;/?:@&=+$,#)也会被转义。返回值中某些字符将被十六进制的转义序列替换。该方法也不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( )

encodeURIComponent("http://www.w3school.com.cn")

输出http%3A%2F%2Fwww.w3school.com.cn

3.decodeURI()/decodeURIComponent()解码URI中被转义的字符

decodeURIComponent(%E4%BD%A0%E5%A5%BDjavascript);

输出你好javascript

4.escape()用于对字符串进行编码,并返回编码字符串。但目前已不推荐使用该函数对URI进行编码。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript OOP面向对象介绍
Dec 02 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
vue中是怎样监听数组变化的
Oct 24 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 #Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 #Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 #Javascript
原生js实现可拖拽效果
Feb 28 #Javascript
javascript 面向对象function详解及实例代码
Feb 28 #Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 #Javascript
原生js实现鼠标跟随效果
Feb 28 #Javascript
You might like
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
php4的session功能评述(二)
2006/10/09 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
python对日志进行处理的实例代码
2018/10/06 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
python字典一键多值实例代码分享
2019/06/14 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
python tqdm库的使用
2020/11/30 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
中学教师岗位职责
2013/11/26 职场文书
机械专业应届生求职信
2013/12/12 职场文书
英文求职信写作小建议
2014/02/16 职场文书
《猫》教学反思
2014/02/26 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
明确岗位职责
2015/02/14 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS
电频谱管理的原则是什么
2022/02/18 无线电
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
浅谈Python中对象是如何被调用的
2022/04/06 Python
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android