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 characters in RFC-2396 for URIs
Reserved characters (reserved characters): These are reserved key characters in the URI that are used to separate parts of the URI. These characters are: ";" | "/" | "?" | ":" | " @" | "&" | "=" | "+" | "$" | ","
Mark character (Mark characters): This type of character is specifically defined in RFC-2396, but is not specifically used, and may be related to other RFC standards. These characters are: "-" | "_" | "." | "!" | "~" | "*" | "'" | " (" | ")"
Basic character (Alphanum characters): This type of character is the body part of the URI, which includes all uppercase letters, lowercase characters, and numbers
After introducing the three types of strings above, it is very easy to explain the differences between the encodeURI and encodeURIComponent functions:
encodeURI: This function escapes encoding (escaping) for all non-basic, mark, and reserved characters in the passed-in string. All characters that need to be escaped are converted to a hexadecimal escape character (%xx) of two or three bytes according to the UTF-8 encoding. For example, the character spaces "" is converted to "%20". Under this encoding mode, ASCII characters that need to be encoded are replaced with one byte escape character, the characters between \u0080 and \U007FF are replaced with two byte escape characters, and the other 16 are Unicode characters replaced with three byte escape characters
encodeURIComponent: There is only one difference between this function and encodeURI, and that is the same escape code for reserved characters. For example, the character ":" is replaced by the escape character "%3a"
The reason why there are two different functions, is because we write the JS code for the URI of two different encoding processing requirements. encodeURI can be used to encode the complete URI string. Instead, encodeURIComponent can encode a part of the URI so that it 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 HTML-formatted mail content that contains a link to the URL value in the URI string above. Obviously the URL value above is a part of the URI that contains the URI reserved key characters. We must call encodeURIComponent to encode it and use it, 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 Code code 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 Code code 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 decode global functions corresponding to these two encode functions are also defined in the ECMA-262 standard, which are decodeURI and decodeuricomponent. We can use them to decode encoded strings.
