JavaScript Encode URL, Escape String

Xah Lee, 2010-10-29, …, 2012-06-06

This pages shows you how to use JavaScript to do percent encoding for URI.

There are these functions:

• encodeURI, decodeURI
• encodeURIComponent, decodeURIComponent
• escape, unescape

The decode ones does the reverse of encode.

encodeURI

Use “encodeURI” to encode a URI that contains non-ASCII characters.

For example, if the input string is http://en.wikipedia.org/wiki/Sylvester–Gallai_theorem, containing a en-dash, Unicode 8211 (U+2013). The result is:

encodeURI:
http://en.wikipedia.org/wiki/Sylvester%E2%80%93Gallai_theorem

The result can be used in a HTML link, example

<a href="http://en.wikipedia.org/wiki/Sylvester%E2%80%93Gallai_theorem">Sylvester–Gallai_theorem</a>

The %E2%80%93 is hexadecimals E2 80 93. It is the byte sequence of the en-dash char by UTF-8 encoding. This encoding is called percent encoding. It is required for all Unicode chars in the URI. (but usually browsers can handle it fine without percent encoding.)

encodeURIComponent

“encodeURIComponent” is like “encodeURI”, but it also encodes the slash and other characters in URI.

encodeURIComponent:
http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FSylvester%E2%80%93Gallai_theorem

“encodeURIComponent” is useful if you want to embed a URI as a parameter inside a URI. Example:

<a href="http://example.com/url?url=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FSylvester%E2%80%93Gallai_theorem">Sylvester–Gallai theorem</a>

The “escape” Function

The “escape” seems to be a old function that doesn't have a clear purpose. Here's its result.

http%3A//en.wikipedia.org/wiki/Sylvester%u2013Gallai_theorem

Sample Template; Test Yourself

test page: JavaScript encode URI.

See also: Sample Unicode Characters.