URL Encode / Decode

URL encoding, formally called percent-encoding, converts characters that are not safe to include directly in a URL into a safe representation. Each unsafe byte is replaced by a percent sign (%) followed by two uppercase hexadecimal digits representing that byte's value — a space becomes %20, an ampersand becomes %26, and an equals sign becomes %3D. Non-ASCII characters (like accented letters or CJK characters) are first encoded as UTF-8 bytes, then each byte is percent-encoded.

RFC 3986 defines which characters are safe to use unencoded in a URL. Unreserved characters — the 26 letters in both cases, digits 0–9, and the four symbols - . _ ~ — may appear anywhere in a URL without encoding. Reserved characters such as / ? # & = : @ [ ] have structural roles in a URL and must be encoded when they appear as data values rather than as delimiters. Everything else must be encoded.

There are two JavaScript functions for URL encoding, and they behave differently. encodeURIComponent() encodes everything except unreserved characters, making it suitable for encoding individual query parameter values and path segments. encodeURI() leaves the reserved characters and # intact, making it suitable for encoding a full URL without breaking its structure. Using the wrong function is a common bug: encodeURI('key=value&key2=value2') does not encode the & and = characters, so it cannot be used for parameter values.

HTML form encoding (application/x-www-form-urlencoded) is related but distinct from RFC 3986 percent-encoding. In form encoding, spaces are encoded as + rather than %20, and the characters encoded differ slightly. When reading query strings from HTML form submissions, + must be decoded as a space. This distinction matters when parsing query strings that originate from HTML forms versus those constructed programmatically.

URL encoding bugs are a frequent source of API integration failures. Common problems include: double-encoding (encoding an already-encoded string, producing %2520 instead of %20), forgetting to encode user-provided values before inserting them into a URL (causing broken URLs or security issues), encoding the path separator / when it should remain as a delimiter, and inconsistent encoding between the client and server leading to mismatched parameter values. This tool helps debug these issues by showing the exact encoded and decoded forms side by side.