This pages shows you how to use JavaScript to do percent encoding for URI.
There are these functions:
The decode ones does the reverse of encode.
encodeURI(str) → returns a new string. These chars are not changed: English alphabets, digits 0 to 9, and
{-,
_,
.,
!,
~,
*,
',
(,
)} and
{;,
,,
/,
?,
:,
@,
&,
=,
+,
$,
#}. All other chars are changed to a sequence of %dd where dd is 2 hexadecimal digits, and this sequence is the byte sequence of the char by UTF-8 encoding.
Printable ASCII chars that are changed are: {{, }, [, ], >, <, %, |, \, ^, ", `}
console.log(encodeURI( "http://en.wikipedia.org/wiki/Sylvester–Gallai_theorem" )); // → http://en.wikipedia.org/wiki/Sylvester%E2%80%93Gallai_theorem
The dash there is – EN DASH Unicode 8211 (U+2013).
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.)
// unchanged chars console.log(encodeURI( "-_.!~*'()" )); // -_.!~*'() console.log(encodeURI( ";,/?:@&=+$#" )); // ;,/?:@&=+$# console.log(encodeURI( "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz" )); // 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
encodeURIComponent(str) is like encodeURI(str), but it also encodes the following printable ascii chars:
{;,
,,
/,
?,
:,
@,
&,
=,
+,
$,
#}
.
console.log(encodeURIComponent( "http://en.wikipedia.org/wiki/Sylvester–Gallai_theorem" )); // → 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. For example:
<a href="http://example.com/url?url=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FSylvester%E2%80%93Gallai_theorem">Sylvester–Gallai theorem</a>
// unchanged chars console.log(encodeURIComponent( "-_.!~*'()" )); // -_.!~*'() // unchanged chars console.log(encodeURIComponent( "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz" )); // 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz // changed ASCII chars console.log(encodeURIComponent( ";,/?:@&=+$#" )); // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
escape(str) → returns a new string from str. The chars that does not change are: ASCII letters, digits, and the
{
@,
*,
_,
+,
-,
.,
/}.
All other chars are replaced by the form %dd or %udddd, where dd is 2 digits of hexadecimal and dddd is 4 digits of hexadecimal. They are the Unicode code point of the char.
〔UNICODE Basics: What's Character Set, Character Encoding, UTF-8, and All That?〕
escape(str) is deprecated.
Use unescape(…) function to decode a string encoded with escape(…).
console.log(escape( "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz" )); // same // double quote and backslash console.log(escape( "\"\\" )); // %22%5C console.log(escape( "!#$%&'()*+,-./:;<=>?@[]^_`{|}~" )); // %21%23%24%25%26%27%28%29*+%2C-./%3A%3B%3C%3D%3E%3F@%5B%5D%5E_%60%7B%7C%7D%7E console.log(escape( "αβγ♥" )); // %u03B1%u03B2%u03B3%u2665
See also: Sample Unicode Characters.