escape()
,
encodeURI()
, and encodeURIComponent()
The purpose of this article is to examine the differences between these three methods and decide on the appropriate times to use each.
escape()
methodThe escape method returns a string value (in Unicode format) that contains the contents of [the argument]. All spaces, punctuation, accented characters, and any other non-ASCII characters are replaced with %xx encoding, where xx is equivalent to the hexadecimal number representing the character. For example, a space is returned as "%20."
The escape and unescape functions let you encode and decode strings. The escape function returns the hexadecimal encoding of an argument in the ISO Latin character set. The unescape function returns the ASCII string for the specified hexadecimal encoding value.
The easiest way to understand the behavior is to see it:
escape('~!@#$%^&*(){}[]=:/,;?+\'"\\'):
encodeURI()
methodThe 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.
Encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, or three escape sequences representing the UTF-8 encoding of the character.
The easiest way to understand the behavior is to see it:
encodeURI('~!@#$%^&*(){}[]=:/,;?+\'"\\'):
encodeURIComponent()
methodThe encodeURIComponent method returns an encoded URI. If you pass the result to decodeURIComponent, the original string is returned. Because the encodeURIComponent method encodes all characters, be careful if the string represents a path such as /folder1/folder2/default.html. The slash characters will be encoded and will not be valid if sent as a request to a web server. Use the encodeURI method if the string contains more than a single URI component.
Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, or three escape sequences representing the UTF-8 encoding of the character.
The easiest way to understand the behavior is to see it:
encodeURIComponent('~!@#$%^&*(){}[]=:/,;?+\'"\\'):
escape()
:encodeURI()
:encodeURIComponent()
:The escape()
method does not encode the
+
character which is interpreted as a space on
the server side as well as generated by forms with spaces in their fields.
Due to this shortcoming and the fact that this function fails to handle
non-ASCII characters correctly, you should avoid use of escape()
whenever possible. The best alternative is usually
encodeURIComponent()
.
escape()
will not encode:
@*/+
Use of the encodeURI()
method is a bit more specialized
than escape()
in that it encodes for
URIs
[REF] as
opposed to the querystring, which is part of a
URL. Use this
method when you need to encode a string to be used for any resource that
uses URIs
and needs certain characters to remain un-encoded. Note that this method
does not encode the '
character, as it is a valid
character within
URIs.
encodeURI()
will not encode:
~!@#$&*()=:/,;?+'
Lastly, the encodeURIComponent()
method should be used in
most cases when encoding a single component of a
URI.
This method will encode certain chars that would normally be recognized as
special chars for
URIs so that
many components may be included. Note that this method does not encode the
'
character, as it is a valid character within
URIs.
encodeURIComponent()
will not encode:
~!*()'
MSDN JScript Reference - escape(), encodeURI(), encodeURIComponent()
Mozilla Developer Core Javascript Guide - escape(), encodeURI(), encodeURIComponent()
ASCII Table - http://www.asciitable.com/
W3C's URIs, URLs, and URNs: Clarifications and Recommendations 1.0 - http://www.w3.org/TR/uri-clarification/