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

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

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

出现的情况:

网址路径中包含汉字

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

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

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

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

效果如下:

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

(2) Javascript函数:encodeURI()

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

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

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

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

例子:

编码:

Javascript:encodeURI("春节");

解码:

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

效果如下:

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

(3)Javascript函数:encodeURIComponent()

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

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

例子:

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

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

效果如下:

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

上一篇:iOS的WebView中使用javascript调用原生的api


下一篇:首席技术官 (CTO) 比普通程序员强在哪