JS DOM: encodeURI, decodeURI

Method encodeURI

encodeURI is a string property of the the Global Object.

encodeURI(str)

Return a new string such that illegal URL characters in str are percent encoded.

This encoding is called percent encoding. It is required for all non-ASCII chars in the URI. (but usually browsers can handle it fine without percent encoding.)

• Each encoded character is changed to the form %ab, repeated 1 to 4 times
• Where a or b is a hexadecimal digit.
• The 2 digits hexadecimal represents a byte (8 bits).
• The sequence of bytes together is the character in Unicode: UTF-8 Encoding

// encode a url that contains space

console.log(
 encodeURI ( "http://example.com/a b.jpg" ) ===
 "http://example.com/a%20b.jpg"
);

// true

Example: Encode Chinese Characters

// encode Chinese characters

console.log(
encodeURI("中文") === "%E4%B8%AD%E6%96%87"
);
// true

// 中
// codepoint 20013
// hexadecimal 4e2d
// utf8 encoding: E4 B8 AD

// 文
// codepoint 25991
// hexadecimal 6587
// utf8 encoding: E6 96 87

Example: Encode a emoji

// encode a emoji
console.log( encodeURI("😂") === "%F0%9F%98%82" );
// true

// 😂
// name: FACE WITH TEARS OF JOY
// codepoint decimal: 128514
// codepoint hexadecimal: 1f602
// utf8 encoding in hexadecimal : F0 9F 98 82

What characters are changed by encodeURI?

{ } [ ] < > % | \ ^ " `

And all non-ASCII Unicode are also changed.

// unchanged chars of encodeURI

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

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

const xc = "0123456789";
console.log(encodeURI(xc) === xc);
// true

const xd = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
console.log(encodeURI(xd) === xd);
// true

const xe = "abcdefghijklmnopqrstuvwxyz";
console.log(encodeURI(xe) === xe);
// true