Summary: encodeURI encodes characters other than three characters () encodeURIComponent encodes characters other than two characters, the reserved characters are escaped
In the SaaS front-end development, we often use two javascriptnative functions: encodeURI and encodeURIComponent. This article explains in detail the purpose of these two functions and compares their differences
background
Both encodeURI and encodeuricomponent are functions defined in the ECMA-262 standard, and all languages that are compatible with this standard (such as JavaScript, ActionScript) implement both functions. They are all global functions used to encode URI (RFC-2396) strings, but they are handled differently from the usage scenario. To explain their differences, we first need to understand the classification of the characters in the URI for the RFC-2396
reserved Characters(reserved characters): Such characters are reserved key characters in URIs that are used to split portions of the URI. These characters are: ";" | "/" | "?" | ":" | " @" | "&" | "=" | "+" | "$" | ","
Mark character (Mark characters): This type of character is specifically defined in RFC-2396, but is not specifically intended for use and may be related to other RFC standards. These characters are: "-" | "_" | "." | "!" | "~" | "*" | "'" | " (" | ")"
Basic Characters(alphanum characters): This type of character is the body part of the URI, which includes all uppercase, lowercase, and numeric
After introducing the above three classes of strings, it is very easy to explain the differences between the encodeURI and the encodeURIComponent functions:
encodeURI: This function escapes encoding (escaping) of all non-basic, mark, and reserved characters in the passed-in string. All characters that need to be escaped are converted to one, two, or three-byte hexadecimal escape character (%xx) according to the UTF-8 encoding. For example, the word spaces "" translates into "%20". Under this encoding pattern, ASCII characters that need to be encoded are replaced with one byte escape character, the characters between \u0080 and \U007FF are replaced by two-byte escape characters, and the other 16 are Unicode characters with three-byte escape characters instead
encodeURIComponent: There is only one difference between this function and encodeURI, which is the same escape encoding for reserved characters. For example, the character ":" is replaced by the escaped character "%3a"
There are two different functions above because we have two different coding requirements for URIs when we write the JS code. The encodeURI can be used to encode a complete URI string. Instead, encodeURIComponent can encode a portion of the URI so that the part can contain some URI reserved characters. This is very useful in our daily programming. For example, the following URI string:
Http://www.mysite.com/send-to-friend.aspx?url=http://www.mysite.com/product.html
In this URI string. The Send-to-friend.aspx page creates an HTML-formatted message content that contains a link that is the URL value in the URI string above. Obviously the above URL value is a part of the URI that contains the URI reserved key character. We must call encodeURIComponent to encode it for use, otherwise the URI string above will be considered an invalid URI by the browser. The correct URI should be as follows:
Http://www.mysite.com/send-to-friend.aspx?url=http%3A%2F%2Fwww.mysite.com%2Fproduct.html
Example
encodeURI
Copy CodeThe code is as follows:
var uri= "My Test.asp?name=ståle&car=saab";
document.write (encodeURI (URI));
The above output is as follows:
My%20test.asp?name=st%c3%a5le&car=saab
encodeURIComponent
Copy CodeThe code is as follows:
var uri= "Http://jb51.net/my Test.asp?name=ståle&car=saab";
document.write (encodeURIComponent (URI));
The above output is as follows:
Http%3a%2f%2fjb51.net%2fmy%20test.asp%3fname%3dst%c3%a5le%26car%3dsaab
Other
The ECMA-262 standard also defines the decode global functions that correspond to these two encode functions, which are decodeURI and decodeuricomponent. We can use them to decode encoded strings.
Comparison of JavaScript encodeURI and encodeURIComponent
