js编码解码decodeURI()与decodeURIComponent()的区别

1. 定义和用法

    decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

    从W3C的定义和用法来看,两者没有什么区别,但是两者的参数是有区别的:

decodeURI(URIstring)        //URIstring    一个字符串,含有要解码的 URI 或其他要解码的文本。
decodeURIComponent(URIstring)       //URIstring   一个字符串,含有编码 URI 组件或其他要解码的文本。

2.使用中区别用法

    区别:encodeURIComponent和decodeURIComponent可以编码和解码URI特殊字符(如#,/,¥等),而decodeURI则不能。

encodeURIComponent('#')
"%23"
decodeURI('%23')
"%23"
decodeURIComponent('%23')
"#"
encodeURI('#')
"#"

可以看出encodeURI和decodeURI对URI的特殊字符是没有编码和解码能力的,实际项目中我们一般需要get请求的方式在地址栏中拼接一些参数,但是参数中如果出现#,/,&这些字符,就必须要用decodeURIComponent了,不然这些特殊字符会导致我们接收参数的错误

假如我们要传一个code字段到http://www.xxx.com,值为20180711#abc

var codeVal = encodeURI('20180711#abc');
var url = 'http://www.xxx.com?code=' + codeVal;
console.log(url);
http://www.xxx.com?code=20180711#abc

http://www.xxx.com接收参数

location.search  //"?code=20180711";
decodeURI("?code=20180711")  //"?code=20180711"

这时候我们拿到的code参数明显是错误的,被特殊字符#截断了,下面我们来看用decodeURIComponent方法:

var codeVal = encodeURIComponent('20180711#abc');
var url = 'http://www.baidu.com?code=' + codeVal;
url;
"http://www.baidu.com?code=20180711%23abc"

http://www.xxx.com接收参数

location.search //"?code=20180711%23abc"
decodeURIComponent("?code=20180711%23abc") //"?code=20180711#abc"

这样子看来参数是不是正确了呢?

3.使用中区别用法扩展

(1) encodeURIComponent(url) 函数

定义和用法

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

语法
encodeURIComponent(URIstring)

参数 描述

URIstring 必需。一个字符串,含有 URI 组件或其他要编码的文本。

返回值

URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。

说明

该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。

其他字符(比如 :;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。

(1) decodeURIComponent(url) 函数

定义和用法

decodeURIComponent() 函数可把字符串作为 URI 组件进行解码。

语法

decodeURIComponent(URIstring)

参数 描述

URIstring 必需。一个字符串,含有 URI 组件或其他要解码的文本。

返回值

URIstring 的副本,其中的某些字符被十六进制的转义序列转换成对应的ACSII字符。

今天在使用js的jQuery的post向后台servlet传递拼接的字符串数据时,一些特殊的字符例如:“+、@、#、$、%、&、?、/”等无法传递到后台输出。

举个例子:

var str1="a+aa+bb@kk$dd";

var data="data1"="+str1+"+"&"+"data2"+str2;

如果不进行编码,则通过js的jQuery的post或者使用window.self.location传递数据到后台,都会造成+、@、$字符无法正常输出。

正确写法:

var str1=encodeURIComponent("a+aa+bb@kk$dd");

var data="data1"="+str1+"+"&"+"data2"+str2;

对于使用window.self.location传递数据到后台时,有一个特殊情况,就是java中的解码方式

JavaScript用encodeURIComponent编码后无法再到后台解码的问题。

目前写法:

window.self.location="index.jsp?data="+encodeURIComponent(url);

java处理的代码为:

searchtext=java.net.URLDecoder.decode(searchtext,"UTF-8");

咋一看觉的没问题,一编一解的,应该可以了。但还是出现了乱码。
原因:

原来在对后台java程序里的data赋值的时候,本身已经使用了一次解码,不过解码的结果依然不对。所以我们

可以在页面上进行两次编码操作,这样后台自动的那次就可以抵消掉一次,然后在使用

data=java.net.URLDecoder.decode(data,"UTF-8");进行一次解码就好了。

正确的代码:

JavaScript:
window.self.location="index.jsp?data="+encodeURIComponent(encodeURIComponent(url));

java:
searchtext=java.net.URLDecoder.decode(data,"UTF-8");

另外还有一种方法是JavaScript进行一次编码,后台java处理时换种想法就好了:

java代码:

String s = new String(request.getParameter("data").getBytes("ISO8859-1"), "UTF-8");