Comparison between encodeuri and encodeuricomponent

During SaaS front-end development, we often use two javascriptnative functions: encodeuri and encodeuricomponent. This articleArticleExplain the usage of these two functions in detail and compare 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

1. Reserved characters: these are reserved key characters in the URI, which are used to separate each part of the URI. These characters are: ";" | "/" | "? "|": "|" @ "|" & "|" = "|" + "|" $ "| ","
   
   
2. 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: "-" | "_" | "." | "! "| "~ "|" * "|" '"|" ("| ")"
   
   
3. Alphanum characters: This type of character is the main part of the URI, which includes allUppercase letters,Lowercase lettersAndNumber
   

After introducing the above three types of strings, we can easily explain the differences between the encodeuri and encodeuricomponent functions:

• Encodeuri: This function applies to allNon-(basic characters, Mark characters, and reserved characters)Escape code (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: The function processing method is different from encodeuri, that isEscape encoding for reserved characters. For example, the character ":" escaped character "% 3A" is replaced

The above two different functions are available because we are writing JSCodeUri. 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

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

VaR uri = "http://w3schools.com/my test. asp? Name = sT å LE & Car = Saab ";

Document. Write (Encodeuricomponent(URI ));

The above output is as follows:

HTTP % 3A % 2f % 2fw3schools.com % 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.