JavaScript Encode URL, Escape String

Want to master JavaScript in a week? Example based, to the point. Xah JavaScript Tutorial.

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

There are these functions:

• encodeURI ＆ decodeURI
• encodeURIComponent ＆ decodeURIComponent
• escape ＆ unescape

encodeURI

encodeURI(str) → return a new string that is percent encoded form of str.

// unchanged chars of encodeURI

var xx = "-_.!~*'()";
console.log(encodeURI(xx) === xx); // true

var xx = ";,/?:@&=+$#";
console.log(encodeURI(xx) === xx); // true

var xx = "0123456789";
console.log(encodeURI(xx) === xx); // true

var xx = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
console.log(encodeURI(xx) === xx); // true

var xx = "abcdefghijklmnopqrstuvwxyz";
console.log(encodeURI(xx) === xx); // true

「encodeURI」 Example

// encode a url that contains EN DASH Unicode 8211 (U+2013).
console.log(encodeURI(
"http://en.wikipedia.org/wiki/Sylvester–Gallai_theorem"
));
// → 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(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

var yy = "-_.!~*'()";
console.log(encodeURIComponent(yy) === yy); // true

// unchanged chars
var yy = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
console.log(encodeURIComponent(yy) === yy); // true

// ASCII chars that are changed
console.log(encodeURIComponent(
  " ;,/?:@&=+$#"
));
// %20%3B%2C%2F%3F%3A%40%26%3D%2B%24%23

The “escape” Function

escape(str) → return 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?〕

escape(…) is deprecated.

Use unescape(…) function to decode a string encoded with escape(…).

// -*- coding: utf-8 -*-
// escape() examples

// unchanged
var xx = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
console.log(escape(xx) === xx); // true

// 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

// space, tab, return
console.log(escape(
" \n\t"
));
// %20%0A%09

// unicode
console.log(escape(
"αβγ♥"
));
// %u03B1%u03B2%u03B3%u2665

// print out all ASCII chars that escape() encodes

for (var i = 0; i < 128; i++) {
    var char = String.fromCharCode(i);
    if ( escape(char) !== char ) {
        console.log(  i + " " + char);
    }
}

// 0 &#0;
// 1 &#1;
// 2 &#2;
// 3 &#3;
// 4 &#4;
// 5 &#5;
// 6 &#6;
// 7 &#7;
// 8 &#8;
// 9
// 10

// 11 &#11;
// 12 &#12;
// 13 

// 14 &#14;
// 15 &#15;
// 16 &#16;
// 17 &#17;
// 18 &#18;
// 19 &#19;
// 20 &#20;
// 21 &#21;
// 22 &#22;
// 23 &#23;
// 24 &#24;
// 25 &#25;
// 26 &#26;
// 27 &#27;
// 28 &#28;
// 29 &#29;
// 30 &#30;
// 31 &#31;
// 32
// 33 !
// 34 "
// 35 #
// 36 $
// 37 %
// 38 &
// 39 '
// 40 (
// 41 )
// 44 ,
// 58 :
// 59 ;
// 60 <
// 61 =
// 62 >
// 63 ?
// 91 [
// 92 \
// 93 ]
// 94 ^
// 96 `
// 123 {
// 124 |
// 125 }
// 126 ~
// 127 &#127;