URL Encoder and Decoder

const message = "Hello World";

const escaped = encodeURIComponent(message);
const unescaped = decodeURIComponent(message);

console.log(`Escaping ${message}: ${escaped}`);
console.log(`Unescaping ${escaped}: ${unescaped}`);

The URL encoding

URL encoding, often known as percent-encoding, is a way to insert reserved characters into a URI. There are a number of reserved characters in the URI scheme. For example, the / character is used to separate different parts of the URL. When a user finds it necessary to insert that character into the URI, percent-encoding is used.

Reserved characters, defined by RFC 2986 section 2.2 (January 2005)

To percent-encode an arbitrary US-ASCII character, simply get its hexadecimal bytes and prefix them with a %. For example, the forward slash / has a hex code of 2f, so its percent-encoding is %2f. To encode Unicode characters, the same process is applied for each byte, creating multiple groups of prefixed hexadecimal characters.

Reserved characters after percent-encoding

Spaces in the application/x-www-form-urlencoded media type

Spaces are encoded differently when encoded as part of the application/x-www-form-urlencoded media type. Instead of being encoded as %20, they will be encoded as + characters. This same syntax can be used in a query string of a request URI. Both are valid ways to represent spaces in URIs.