JS对URL字符串进行编码/解码分析
2015-12-02 12:05
302 查看
一、为什么要进行js编码和解码?
只有字母和数字[0-9a-zA-Z]、一些特殊符号“$-_.+!*'(),”[不包括双引号]、以及某些保留字,才可以不经过编码直接用于URL。
出现的情况:
网址路径中包含汉字
在百度搜索百度百科。那么会出现。wd=百度等字样。
我们打开火狐浏览器的开发者工具观察发现,已经将汉字转换成字符。
![](http://images2015.cnblogs.com/blog/697835/201512/697835-20151202114323655-1652240471.png)
二、如何进行js编码和解码工作?
关于URL编码/javascript/js url 编码/url的三个js编码函数 escape(), encodeURI(), encodeURIComponent() 。
我们可以直接在浏览器的控制台直接执行函数:
(1)Javascript函数:escape()
escape 方法:返回一个可在所有计算机上读取的编码 String 对象。
不会被此方法编码的字符: @ * / +
实际上,escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值。比如“春节”的返回结果 是%u6625%u8282,也就是说在Unicode字符集中,“春”是第6625个(十六进制)字符,“节”是第8282个(十六进制)字符。
它的具体规则是,除了ASCII字母、数字、标点符号“@ * _ + - . /”以外,对其他所有字符进行编码。在\u0000到\u00ff之间的符号被转成%xx的形式,其余符号被转成%uxxxx的形式。
还有两个地方需要注意。
首先,无论网页的原始编码是什么,一旦被Javascript编码,就都变为unicode字符。也就是说,Javascipt函数的输入和输出,默认都是Unicode字符。
例子:
编码:
javascript:escape("春节");
解码:
javascript:unescape("%u6625%u8282");
效果如下:
![](http://images2015.cnblogs.com/blog/697835/201512/697835-20151202115345546-1852644882.png)
(2) Javascript函数:encodeURI()
encodeURI 方法:返回编码为有效的统一资源标识符 (URI) 的字符串。
不会被此方法编码的字符:! @ # $ & * ( ) = : / ; ? + '
encodeURI()是Javascript中真正用来对URL编码的函数。
它着眼于对整个URL进行编码,因此除了常见的符号以外,对其他一些在网址中有特殊含义的符号“; / ? : @ & = + $ , #”,也不进行编码。编码后,它输出符号的utf-8形式,并且在每个字节前加上%。
例子:
编码:
Javascript:encodeURI("春节");
解码:
Javascript:decodeURI("%E6%98%A5%E8%8A%82");
效果如下:
![](http://images2015.cnblogs.com/blog/697835/201512/697835-20151202120144608-833519689.png)
(3)Javascript函数:encodeURIComponent()
最后一个Javascript编码函数是encodeURIComponent()。与encodeURI()的区别是,它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。
因此,“; / ? : @ & = + $ , #”,这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码。至于具体的编码方法,两者是一样。
例子:
编码:
Javascript:encodeURIComponent("春节");
解码:
Javascript:decodeURIComponent("%E6%98%A5%E8%8A%82");
效果如下:
只有字母和数字[0-9a-zA-Z]、一些特殊符号“$-_.+!*'(),”[不包括双引号]、以及某些保留字,才可以不经过编码直接用于URL。
出现的情况:
网址路径中包含汉字
在百度搜索百度百科。那么会出现。wd=百度等字样。
我们打开火狐浏览器的开发者工具观察发现,已经将汉字转换成字符。
![](http://images2015.cnblogs.com/blog/697835/201512/697835-20151202114323655-1652240471.png)
https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=%E7%99%BE%E5%BA%A6%E7%99%BE%E7%A7%91
二、如何进行js编码和解码工作?
关于URL编码/javascript/js url 编码/url的三个js编码函数 escape(), encodeURI(), encodeURIComponent() 。
我们可以直接在浏览器的控制台直接执行函数:
(1)Javascript函数:escape()
escape 方法:返回一个可在所有计算机上读取的编码 String 对象。
不会被此方法编码的字符: @ * / +
实际上,escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值。比如“春节”的返回结果 是%u6625%u8282,也就是说在Unicode字符集中,“春”是第6625个(十六进制)字符,“节”是第8282个(十六进制)字符。
它的具体规则是,除了ASCII字母、数字、标点符号“@ * _ + - . /”以外,对其他所有字符进行编码。在\u0000到\u00ff之间的符号被转成%xx的形式,其余符号被转成%uxxxx的形式。
还有两个地方需要注意。
首先,无论网页的原始编码是什么,一旦被Javascript编码,就都变为unicode字符。也就是说,Javascipt函数的输入和输出,默认都是Unicode字符。
例子:
编码:
javascript:escape("春节");
解码:
javascript:unescape("%u6625%u8282");
效果如下:
![](http://images2015.cnblogs.com/blog/697835/201512/697835-20151202115345546-1852644882.png)
(2) Javascript函数:encodeURI()
encodeURI 方法:返回编码为有效的统一资源标识符 (URI) 的字符串。
不会被此方法编码的字符:! @ # $ & * ( ) = : / ; ? + '
encodeURI()是Javascript中真正用来对URL编码的函数。
它着眼于对整个URL进行编码,因此除了常见的符号以外,对其他一些在网址中有特殊含义的符号“; / ? : @ & = + $ , #”,也不进行编码。编码后,它输出符号的utf-8形式,并且在每个字节前加上%。
例子:
编码:
Javascript:encodeURI("春节");
解码:
Javascript:decodeURI("%E6%98%A5%E8%8A%82");
效果如下:
![](http://images2015.cnblogs.com/blog/697835/201512/697835-20151202120144608-833519689.png)
(3)Javascript函数:encodeURIComponent()
最后一个Javascript编码函数是encodeURIComponent()。与encodeURI()的区别是,它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。
因此,“; / ? : @ & = + $ , #”,这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码。至于具体的编码方法,两者是一样。
例子:
编码:
Javascript:encodeURIComponent("春节");
解码:
Javascript:decodeURIComponent("%E6%98%A5%E8%8A%82");
效果如下:
![](http://images2015.cnblogs.com/blog/697835/201512/697835-20151202120325796-1341648017.png)
相关文章推荐
- JSSIP了解-----JS在通讯中的应用(使用sip协议)---阿冬专栏!!
- JS剖析正方形物体碰撞原理
- Gson解析json字符串、json数组转换成对象
- JavaScript了解---JsSip了解---阿冬专栏!!
- javascript实现自动填写表单实例简析
- JSP学习
- 纯js代码实现简单计算器
- 从HTML Components的衰落看Web Components的危机 HTML Components的一些特性 JavaScript什么叫端到端组件 自己对Polymer的意见
- Js常用方法
- js 等待几秒 每隔几秒 执行
- JS中如何实现sleep(休眠)的功能?
- js数组去重复
- MVC中处理Json和JS中处理Json对象
- 整理Javascript事件响应学习笔记
- js页面跳转整理
- JS弹出框,弹出层
- JS操作DOM元素属性和方法
- js数组方法
- 在html页面中展示JSON
- 原生JavaScript实现异步多文件上传