Escape () vs encodeURI () vs encodeURIComponent ()

There are three functions in JavaScript that can encode strings, namely: Escape,encodeuri,encodeuricomponent, corresponding 3 decoding functions: Unescape,decodeuri, decodeURIComponent.

Here's a brief look at the difference between them

1 Escape () function

Definition and usage
The escape () function encodes the string so that it can be read on all computers.

Grammar
Escape (String)

Parameter description
string is required. The string to be escaped or encoded.

return value
A copy of the encoded string. Some of these characters are replaced with 16-binary escape sequences.

Description
The method does not encode ASCII letters and numbers, nor does it encode the following ASCII punctuation marks:-_. ! ~ * ' (). All other characters will be replaced by escape sequences.

2 encodeURI () function
Definition and usage
The encodeURI () function encodes a string as a URI.

Grammar
encodeURI (uristring)

Parameter description
uristring required. A string that contains the URI or other text to encode.

return value
A copy of the uristring, where some of the characters will be replaced by a hexadecimal escape sequence.

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

The purpose of this method is to fully encode the URI, so the encodeURI () function is not escaped for the following ASCII punctuation mark with a special meaning in the URI:;/?:@&=+$,#

3 encodeURIComponent () function

Definition and usage
The encodeURIComponent () function encodes a string as a URI component.

Grammar
encodeURIComponent (uristring)

Parameter description
uristring required. A string that contains the URI component or other text to encode.

return value
A copy of the uristring, where some of the characters will be replaced by a hexadecimal escape sequence.

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

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

Hints and Notes
Tip: Note the difference between the encodeURIComponent () function and the encodeURI () function, which assumes that its arguments are part of a URI (such as a protocol, hostname, path, or query string). Therefore, the encodeURIComponent () function escapes punctuation marks that are used to separate the various portions of the URI .

4 Summary:

Through the analysis of three functions, we can know: Escape () In addition to ASCII letters, numbers and specific symbols, the passed-in strings are all escaped encoding, so if you want to encode the URL, it is best not to use this method.

encodeURI () is used to encode the entire URI because the legitimate characters in the URI are not converted by encoding .

The encodeURIComponent method, which encodes a single uricomponent (the request parameter), should be the most common, escaping the Chinese and special characters in the argument without affecting the entire URL.

5 Example:

1 Escape ()

<Scripttype= "Text/javascript">document.write (Escape ("http://www.w3school.com.cn/") + "<br/>") document.write (Escape ("?! = () #%&"))</Script>

Output: http%3a//www.w3school.com.cn%3f%21%3d%28%29%23%25%26

2 encodeURI ()

<Scripttype= "Text/javascript">document.write (encodeURI ("http://www.w3school.com.cn/")+ "<br/>") document.write (encodeURI ("http://www.w3school.com.cn/My first/")) document.write (encodeURI (",/?:@&=+$#"))</Script>

Output: http://www.w3school.com.cn/http://www.w3school.com.cn/My%20first/Summary: Encodes the entire URL, and a specific identifier for the URL (such as,/?:@&=+$#) will not be transcoded. 

3 encodeURIComponent ()

Example 1:

<Scripttype= "Text/javascript">document.write (encodeURIComponent ("http://www.w3school.com.cn/")) document.write ("<br/>") document.write (encodeURIComponent ("http://www.w3school.com.cn/p 1/")) document.write ("<br/>") document.write (encodeURIComponent (",/?:@&=+$#"))</script output: http%3a%2f%2fwww.w3school.com.cn http%3a%2f%2fwww.w3school.com.cn%2fp%201%2f%2C%2F%3F%3A%40%26%3D% 2b%24%23

Example 2:

<Scriptlanguage= "JavaScript">document.write ('<a href= "http://passport.baidu.com/?logout&aid=7&u='+encodeURIComponent ("Http://cang.baidu.com/bruce42")+'"> Exit </a>');</Script>

The parameters in the URL are encoded because the parameter is also a URL, and if not encoded, it affects the entire URL of the jump.

Escape () vs encodeURI () vs encodeURIComponent ()