URL Encoder / Decoder

Percent-encode or decode any string. Plus a full URL parser.

encodeURIComponent — encodes everything including : / ? # @ — use for query strings and path segments.

How URL Encoding Works

Percent-encoding (also called URL encoding) replaces unsafe characters with a % sign followed by two hexadecimal digits representing the byte value. For example, a space becomes %20 and é (U+00E9) becomes %C3%A9 in UTF-8. This allows any Unicode character to safely appear in a URL.

The two JavaScript functions behave differently. encodeURIComponent is the stricter one: it encodes everything except letters, digits, and - _ . ! ~ * ' ( ). Use it for query string values and path segments. encodeURI is lenient: it leaves the structural characters : / ? # [ ] @ ! $ & ' ( ) * + , ; = intact because it assumes you're passing a complete URL.

The URL parser mode uses the browser's built-in URL API (WHATWG URL Standard) to decompose any valid URL into protocol, host, path, query parameters, and hash fragment — displayed as a table for easy inspection.

References

URL syntax and percent-encoding are formally defined in RFC 3986 — Uniform Resource Identifier (URI): Generic Syntax (T. Berners-Lee, R. Fielding, L. Masinter, January 2005, rfc-editor.org/rfc/rfc3986). Section 2.1 defines percent-encoding; Section 3 defines the generic URI syntax (scheme, authority, path, query, fragment). The URL parser uses the WHATWG URL Standard implemented natively in all modern browsers.

What's here — and what's not

Two-way encoding/decoding, a clear explanation of when to use encodeURIComponent vs encodeURI, Unicode correctness, a swap button, and a URL parser that breaks any URL into a clean table of components including all query parameters individually.

What isn't here: batch encoding of multiple values at once, a query string builder (building a URL from scratch by filling in fields), or encoding mode comparison side by side. These would be useful but add enough UI complexity to belong in a more specialized tool.

Frequently Asked Questions

What is the difference between encodeURIComponent and encodeURI?
encodeURIComponent encodes all characters except letters, digits, and - _ . ! ~ * ' ( ). Use it for individual query parameter values and path segments. encodeURI leaves structural URL characters (: / ? # @ etc.) unencoded because it assumes you pass a complete navigable URL. Encoding a full URL with encodeURIComponent would break it — the slashes and colons would become %2F and %3A.
What does % mean in a URL?
The % character is the escape prefix in percent-encoding. It's always followed by two hexadecimal digits that represent a byte value. For example, %20 is the byte 0x20 (decimal 32), which is the ASCII space character. For Unicode characters outside ASCII, multiple percent-encoded bytes represent the UTF-8 encoding of that character — e.g. %C3%A9 for é.
When should I NOT encode a URL?
Don't use encodeURI or encodeURIComponent on a URL you're storing as a link — modern browsers handle UTF-8 in URLs automatically when navigating. Only encode when: building a URL programmatically to pass to a fetch() call, constructing query parameters for an API, or embedding a URL inside another URL as a parameter value.
Where is percent-encoding defined?
RFC 3986 — 'Uniform Resource Identifier (URI): Generic Syntax' (Berners-Lee, Fielding, Masinter, January 2005). Section 2.1 defines percent-encoding. Section 3 defines the full URI component syntax. Available at rfc-editor.org/rfc/rfc3986.
Does this handle Unicode correctly?
Yes. JavaScript's encodeURIComponent converts Unicode characters to their UTF-8 byte representation before percent-encoding each byte. For example, the Japanese character 日 (U+65E5) encodes to %E6%97%A5 — three bytes representing the UTF-8 encoding of that code point. decodeURIComponent correctly reverses this process.