The Complete Guide to URL Encoding and Percent-Encoding

Every time you click a link, submit a web form, or make an API request, URL encoding is happening behind the scenes. URLs can only legally contain a specific set of ASCII characters, but we routinely need to pass data containing spaces, special symbols, non-ASCII characters like accented letters (é, ñ, ü), and characters from non-Latin scripts like Arabic, Chinese, or Hindi. URL encoding — also called percent-encoding — is the universal solution that converts any character into a URL-safe format.

What is URL Encoding?

URL encoding replaces unsafe ASCII characters with a percent sign (%) followed by two hexadecimal digits representing the character's byte value in UTF-8. This is formally defined by RFC 3986 (Uniform Resource Identifier: Generic Syntax), published in 2005 by the IETF.

For example:

Space → %20 (or + in form data encoding)
& → %26
= → %3D
/ → %2F
? → %3F
é → %C3%A9 (two bytes in UTF-8)
中 → %E4%B8%AD (three bytes in UTF-8)

Safe vs. Reserved vs. Unsafe Characters

RFC 3986 divides URL characters into three categories:

Unreserved Characters (Never Encoded)

These characters have no special meaning in a URL and can be used literally:

A-Z a-z 0-9 - _ . ~

Reserved Characters (Encoded when used as data)

These characters have special meaning as URL delimiters. When they appear as data (not as structural separators), they must be percent-encoded:

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

Unsafe Characters (Always Encoded)

These characters can be misinterpreted or cause problems in URLs:

Space, " < > { } | \ ^ `

encodeURI() vs encodeURIComponent() — The Critical Difference

JavaScript provides two built-in encoding functions that are used in different contexts, and confusing them is a common source of bugs:

encodeURI()

Encodes a complete URL, leaving the structural characters intact. It does NOT encode: A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

Use this when: Encoding a full URL that you want to remain a valid URL.

Example: encodeURI("https://example.com/path?q=hello world") → "https://example.com/path?q=hello%20world"

encodeURIComponent()

Encodes a component of a URL (a query parameter value, a path segment), encoding everything except: A-Z a-z 0-9 - _ . ! ~ * ' ( )

Use this when: Encoding a value that will be embedded inside a URL — this prevents the value from accidentally being interpreted as URL structure.

Example: encodeURIComponent("hello&world=yes") → "hello%26world%3Dyes"

Rule of thumb: When in doubt, use encodeURIComponent(). Use encodeURI() only for full, complete URLs.

Common URL Encoding Use Cases

Search queries: Google's URL for searching "C++ programming" is ?q=C%2B%2B+programming
API query parameters: Passing dates, names, or addresses as GET parameters requires encoding
OAuth and authentication: OAuth signatures encode the request URL and parameters to prevent tampering
Form submission: HTML forms with method="GET" URL-encode field values before sending them in the query string
Internationalized domain names: Non-ASCII domain names are encoded using Punycode (a different but related standard)
Email links (mailto:): Email subjects and bodies in mailto: links must be URL-encoded

Decoding URL-Encoded Strings

URL decoding is the reverse process — converting %XX sequences back to their original characters. This is useful when you receive a URL-encoded string (from a server response, a log file, or a copied browser URL) and need to read or process the actual values. Our tool handles both encoding and decoding with a single click.

Use our free URL Encoder/Decoder to instantly encode or decode any text for use in web URLs. For encoding binary data, also try our Base64 Encoder/Decoder.

URL Encode / Decode