The Complete Guide to URL Encoding and Decoding: Percent-Encoding & Query Strings

Overview

URL encoding (formally known as Percent-Encoding) is a standard mechanism defined in RFC 3986 for encoding information within a Uniform Resource Identifier (URI). When URLs include reserved punctuation, non-ASCII characters, spaces, or international symbols, they must be converted into safe percent-encoded triplets.

Our URL Encoder / Decoder allows instant, 100% client-side conversion between plain text, query strings, and encoded URLs.

---

Reserved vs. Unreserved Characters

RFC 3986 divides characters into two primary sets:

1. Unreserved Characters

These characters never require encoding and have identical meanings in any URL:

Uppercase & lowercase letters (A-Z, a-z)

Decimal digits (0-9)

Special symbols: Hyphen (-), Underscore (_), Period (.), Tilde (~)

2. Reserved Characters

These characters carry specific syntactic roles in URI parsing:

Slashes (/) define path hierarchies.

Question mark (?) denotes the beginning of the query string.

Ampersand (&) and Equals (=) delimit key-value parameter pairs.

Hash (#) marks document fragment identifiers.

When user input contains reserved characters as raw data values (such as an email address like user+tag@domain.com or an ampersand inside a query value), they must be converted to %XX hexadecimal ASCII codes.

---

Common Percent-Encoding Replacements

| Character | Meaning / Usage | Encoded Value |
|:---:|:---|:---:|
| Space | Whitespace | %20 |
| ! | Exclamation mark | %21 |
| # | Fragment anchor | %23 |
| $ | Dollar sign | %24 |
| & | Query separator | %26 |
| + | Plus symbol | %2B |
| / | Path separator | %2F |
| : | Scheme/port delimiter | %3A |
| = | Key-value assignment | %3D |
| ? | Query start | %3F |
| @ | Userinfo delimiter | %40 |

---

encodeURI vs. encodeURIComponent in JavaScript

encodeURI(): Encodes a complete URI, keeping protocol, domain slashes, colons, and query delimiters untouched. Use this when you have an entire URL string.

encodeURIComponent(): Aggressively encodes all reserved punctuation except unreserved characters. Always use this when inserting arbitrary user text into query string parameters.