Thứ Năm, 1 tháng 11, 2012

What is the difference between decodeURIComponent and decodeURI?

Sometimes, we post the request (search for instance) with the value of parameter ("keyword" for instance) passing on the URI, like below:

var uri="http://www.myweb.com/search.asp?keyword=lập trình C++&includecomment=true";
If keyword parameter contains the special characters like , / ? : @ & = + $ #..., the URI will be parsed incorrectly. So we have to encode the parameter.

Examples:
alert(encodeURI('lập trình C++')); ==> Return: l%E1%BA%ADp%20tr%C3%ACnh%20C++

alert(encodeURIComponent('lập trình C++')); ==> Return:l%E1%BA%ADp%20tr%C3%ACnh%20C%2B%2B 

alert(encodeURI('http://www.myweb.com/search.asp?keyword=lập trình C++&includecomment=true')); ==> Return: http://www.myweb.com/search.asp?keyword=l%E1%BA%ADp%20tr%C3%ACnh%20C++&includecomment=true

alert(encodeURIComponent('http://www.myweb.com/search.asp?keyword=lập trình C++&includecomment=true')); ==> Return: http%3A%2F%2Fwww.myweb.com%2Fsearch.asp%3Fkeyword%3Dl%E1%BA%ADp%20tr%C3%ACnh%20C%2B%2B%26includecomment%3Dtrue

From MSDN JScript Reference:
The encodeURI method returns an encoded URI. If you pass the result to decodeURI, the original string is returned. The encodeURI method does not encode the following characters: ":", "/", ";", and "?". Use encodeURIComponent to encode these characters.

EncodeURI
, sometimes called fixBrokenURI or produces a "safe" URI by encoding invalid characters such as spaces and some other (e.g. nonprintable), and turns it into a real URI. It has a valid use in fixing up invalid URIs from user input, and it can also be used to turn an IRI (URI with bare Unicode characters in) into a plain URI (using %-escaped UTF-8 to encode the non-ASCII).

EncodeURIComponent
encodes the colon and slash and plus characters, and is meant to be used in query strings. The encoding of + and ? and & is of particular importance here, as these are special chars in query strings.

Now you know the real difference between EncodeURI() and EncodeURIComponent().
Converserly, DecodeURI() and DecodeURIComponent() is provided to be an inverse of EncodeURI and EncodeURIComponent.

And here the real Web example:

<input type="text" name="keyword" id="keyword" value="<%=Server.HtmlEncode(Request.QueryString["keyword"]) %>" onkeypress="if(event.keyCode==13) SearchPage()" />
document.write(encodeURIComponent(uri));
  

Happy Coding, 

9 nhận xét:

Henry Pham nói...

http://www.javascripter.net/faq/escape.htm

escape In all browsers that support JavaScript, you can use the escape function. This function works as follows: digits, Latin letters and the characters + - * / . _ @ remain unchanged; all other characters in the original string are replaced by escape-sequences %XX, where XX is the ASCII code of the original character. Example:

escape("It's me!") // result: It%27s%20me%21
For Unicode input strings, the function escape has a more complex behavior. If the input is a Unicode string, then non-ASCII Unicode characters will be converted to the Unicode escape-sequences %uXXXX. For example, escape will encode the capital Cyrillic letter A as %u0410. To decode strings encoded with escape, use the JavaScript function unescape.

encodeURI and encodeURIComponent In addition to escape, modern browsers support two more functions for URL-encoding: encodeURI and encodeURIComponent. These functions are similar to escape, except that they leave intact some characters that escape encodes (e.g. apostrophe, tilde, parentheses); moreover, encodeURIComponent encodes some characters (+ / @) that escape leaves intact. Unlike escape, the encodeURI and encodeURIComponent functions do not produce %uXXXX for Unicode input; instead, they produce %XX%XX or %XX%XX%XX. For example, encodeURI and encodeURIComponent will encode the capital Cyrillic letter A as %D0%90, and the euro sign (€) as %E2%82%AC. To decode strings encoded with encodeURI and encodeURIComponent, use the JavaScript functions decodeURI and decodeURIComponent, respectively.

Lucky Luke Blog nói...

So cool explanation about encoding URL! Thank you so much!

Henry Pham nói...

According to w3schools: The unescape() function was deprecated in JavaScript version 1.5. Use decodeURI() or decodeURIComponent() instead.

Unknown nói...

What functions in .NET that is equivalent to encodeURLComponent() and decodeURIComponent() ?

Henry Pham nói...
Nhận xét này đã bị tác giả xóa.
Henry Pham nói...
Nhận xét này đã bị tác giả xóa.
Henry Pham nói...
Nhận xét này đã bị tác giả xóa.
Henry Pham nói...

Hi,

In .NET, HttpUtility.UrlEncode() is equivalent to encodeURLComponent().
HttpUtility.UrlDecode() is equivalent to decodeURIComponent().

Note: You can use Server.UrlEncode() and Server.UrlDecode(). It's same with HttpUtility.

In fact, Server.UrlEncode will use HttpUtility.UrlEncode internally. There is no specific difference. The reason for existence of Server.UrlEncode is compatibility with classic ASP.

Thanks,

Henry Pham nói...

Other same functions:
Uri.EscapeDataString() and Uri.UnescapeDataString()