Encoding and decoding in JavaScript - encodeURIComponent and decodeURIComponent||decodeURI and encodeURI

illustrate

The decodeURI() function can decode the URI encoded by the encodeURI() function

The decodeURIComponent() function can decode the URI encoded by the encodeURIComponent() function

 The difference between the two - parameters

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

// 区别：encodeURIComponent和decodeURIComponent可以编码和解码URI特殊字符（如#，/，￥等），而decodeURI则不能

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

It can be seen that encodeURI and decodeURI have no ability to encode and decode the special characters of URI. In actual projects, we generally need to splicing some parameters in the address bar in the way of get request, but if there are characters like #, /, & in the parameters, it will be You must use decodeURIComponent, otherwise these special characters will cause us to receive parameters errors

假如我们要传一个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" 

At this time, the code parameter we got is obviously wrong and is truncated by the special character #. Let's look at the decodeURIComponent method:

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"
这样子看来参数是不是正确了呢？

Differentiate usage extensions in use

encodeURIComponent(url) 函数

定义和用法

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

语法
encodeURIComponent(URIstring)

Parameter Description

URIstring is required. A string containing URI components or other text to encode.

return value

A copy of the URIstring with some characters replaced by hexadecimal escape sequences.

illustrate

This method does not encode ASCII letters and numbers, nor does it encode these ASCII punctuation marks: - _ . ! ~ * ' ( ) .

Other characters (such as: ;/?:@&=+$,# punctuation marks used to separate URI components), are replaced by one or more hexadecimal escape sequences.

decodeURIComponent(url) function

Definition and usage

The decodeURIComponent() function decodes a string as a URI component.

grammar

decodeURIComponent(URIstring)

Parameter Description

URIstring is required. A string containing URI components or other text to decode.

return value

A copy of the URIstring with some characters converted to the corresponding ASCII characters by hexadecimal escape sequences.

Today, when using the jQuery post of js to pass spliced ​​string data to the background servlet, some special characters such as "+, @, #, $, %, &, ?, /" cannot be passed to the background output.

for example:

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

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

If no encoding is performed, the +, @, and $ characters will not be output normally if the jQuery post of js or the window.self.location is used to transfer data to the background.

Correct spelling:

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

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

When using window.self.location to transfer data to the background, there is a special case, which is the decoding method in java :

The problem that JavaScript cannot be decoded in the background after being encoded with encodeURIComponent.

Currently written as:

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

The code processed by java is:

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

I don't think it's a problem, it should be fine if I compose it one by one. But there are still garbled characters.
reason:

It turns out that when assigning a value to the data in the background java program, it has already used one decoding, but the decoding result is still wrong. so we

You can perform two encoding operations on the page, so that the automatic one in the background can be offset once, and then use

data=java.net.URLDecoder.decode(data,"UTF-8"); just decode once.

correct code

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

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

In addition, there is another way to encode JavaScript once, and just change the idea when java processing in the background

java code:

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