URL Encoding Explained: Percent-Encoding & Special Characters Guide

URL encoding (officially known as percent-encoding) is a mechanism used to translate strings into a format that is universally transmittable over the internet via HTTP request headers, query strings, and body structures.

A URL can only contain characters from the standard US-ASCII character set. Non-ASCII or special reserved symbols must be escaped before transit.

In this guide, we'll explain how percent-encoding functions, the difference between escaping methods, and UTF-8 encoding rules.

What is Percent-Encoding?

Characters outside the safe subset of ASCII are converted to their corresponding byte values in UTF-8, and each byte is written as a percent sign (%) followed by a two-digit hexadecimal representation.

For example:

• A space character ( ) becomes %20 (or + in legacy form-urlencoded formats).
• An exclamation mark (!) becomes %21.
• The emoji 🚀 is encoded in UTF-8 as four bytes, becoming %F0%9F%9A%80.

Reserved vs. Unreserved Characters

RFC 3986 splits characters in a URI/URL structure into two categories:

1. Unreserved Characters: These never need encoding and can be used directly:

• Letters: A-Z, a-z
• Numbers: 0-9
• Safe symbols: - (hyphen), . (period), _ (underscore), ~ (tilde)

1. Reserved Characters: These have special structural meaning in URLs (like separators) and must be encoded when they represent arbitrary data (like query parameter values):

• Structural: :, /, ?, #, [, ], @ (delimiters)
• Parameters: !, $, &, ', (, ), *, +, ,, ;, =

JavaScript: encodeURI vs. encodeURIComponent

When writing web applications, JavaScript provides two primary global functions for URL encoding:

1. encodeURI()

Used to encode a complete, functional URL. It does NOT escape characters that are structural parts of the URL (e.g. http://, slashes, query parameters separators, or hashes).

const url = "https://example.com/search?q=hello world & stuff";
console.log(encodeURI(url));
// Output: "https://example.com/search?q=hello%20world%20&%20stuff"

2. encodeURIComponent()

Used to encode a individual parameter or query string value. It escapes *every* reserved character including slashes, colons, question marks, and ampersands.

const query = "hello world & stuff";
console.log(encodeURIComponent(query));
// Output: "hello%20world%20%26%20stuff"

Space-As-Plus vs. %20

You will sometimes see spaces encoded as + instead of %20.

• %20 represents the standard space character according to RFC 3986.
• + is used historically under the application/x-www-form-urlencoded query parameter mime-type (such as legacy HTML form submission parameters). Modern web tools usually allow switching between these formats depending on API requirements.