JS对URL字符串进行编码/解码分析

 

一、为什么要进行js编码和解码？

 

只有字母和数字[0-9a-zA-Z]、一些特殊符号“$-_.+!*'(),”[不包括双引号]、以及某些保留字，才可以不经过编码直接用于URL。

出现的情况：

 

网址路径中包含汉字

在百度搜索百度百科。那么会出现。wd=百度等字样。

我们打开火狐浏览器的开发者工具观察发现，已经将汉字转换成字符。

 

 

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");

 

效果如下：

 

（2） Javascript函数：encodeURI()

encodeURI 方法：返回编码为有效的统一资源标识符 (URI) 的字符串。

不会被此方法编码的字符：! @ # $ & * ( ) = : / ; ? + '

 

encodeURI()是Javascript中真正用来对URL编码的函数。

它着眼于对整个URL进行编码，因此除了常见的符号以外，对其他一些在网址中有特殊含义的符号“; / ? : @ & = + $ , #”，也不进行编码。编码后，它输出符号的utf-8形式，并且在每个字节前加上%。

 

例子：

编码：

Javascript:encodeURI("春节");

 

解码：

Javascript:decodeURI("%E6%98%A5%E8%8A%82");

 

效果如下：

 

（3）Javascript函数：encodeURIComponent()

 

最后一个Javascript编码函数是encodeURIComponent()。与encodeURI()的区别是，它用于对URL的组成部分进行个别编码，而不用于对整个URL进行编码。

因此，“; / ? : @ & = + $ , #”，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码。至于具体的编码方法，两者是一样。

 

例子：

编码：
Javascript:encodeURIComponent("春节");

解码：
Javascript:decodeURIComponent("%E6%98%A5%E8%8A%82");

 

效果如下：