During SaaS front-end development, we often use two JavaScriptNative functions: encodeURI and encodeURIComponent. This article details the usage of these two functions and compares their differences
Background
Both encodeURI and encodeURIComponent are functions defined in the ECMA-262 standard and will be implemented in all languages compatible with this standard (such as JavaScript and ActionScript. They are all global functions used to encode URI (RFC-2396) strings, but they are processed differently from the use case. To explain their differences, we first need to understand the character classification in the RFC-2396 for the URI
Reserved characters: these are reserved key characters in the URI, which are used to separate each part of the URI. These characters are: ";" | "/" | "? "|": "|" @ "|" & "|" = "|" + "|" $ "| ","
Mark character (mark characters): This type of character is specifically defined in the RFC-2396, but is not specifically used, may be related to other RFC standards. These characters are: "-" | "_" | "." | "! "| "~ "|" * "|" '"|" ("| ")"
Alphanum characters: This type of character is the main part of a URI. It contains all uppercase letters, lowercase letters, and numbers.
After introducing the above three types of strings, we can easily explain the differences between the encodeURI and encodeURIComponent functions:
EncodeURI: This function is used to escape all non-(basic, Mark, and reserved) characters in the input string (escaping ). All characters to be escaped are converted to one, two, or three bytes of hexadecimal escape characters (% xx) According to UTF-8 encoding ). For example, convert the character space "" to "% 20 ". In this encoding mode, the ASCII characters to be encoded are replaced by one byte escape character, and the characters between u0080 and u007ff are replaced by two byte escape characters, the other 16 characters are Unicode characters, which are replaced by three-byte escape characters.
EncodeURIComponent: There is only one difference between the function processing method and encodeURI, that is, escape encoding for reserved characters. For example, the character ":" escaped character "% 3A" is replaced
The above two different functions are available because we have two different encoding requirements for Uris when writing JavaScript code. EncodeURI can be used to encode the complete URI string. EncodeURIComponent can encode a part of the URI so that this part can contain some reserved URI 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 HTML-formatted mail content that contains a link whose address is the url value in the URI string above. Obviously, the above url value is a part of the URI, which contains the key characters reserved by the URI. We must call encodeURIComponent to encode the URI. Otherwise, the URI string above will be considered invalid 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
The 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
The 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 % 3 Fname % 3Dst % C3 % A5le % 26car % 3 Dsaab
Others
The decode global functions corresponding to the two encode functions are also defined in the ECMA-262 standard, which are decodeURI and decodeURIComponent. We can use them to decode the encoded strings.
