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 相关文章推荐
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
在HTML中使用JavaScript的两种方法
Dec 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
php实现的美国50个州选择列表实例
2015/04/20 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
python访问系统环境变量的方法
2015/04/29 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
TensorFlow实现创建分类器
2018/02/06 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
Python for循环生成列表的实例
2018/06/15 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
python中字典增加和删除使用方法
2020/09/30 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
联想中国官方商城:Lenovo China
2017/10/18 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
财务经理岗位职责
2013/11/09 职场文书
幼教求职信
2014/03/12 职场文书
学校校庆演讲稿
2014/05/22 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
功夫熊猫观后感
2015/06/10 职场文书