Skip to content

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.

When to Use URL Encoding

URL encoding (percent-encoding) converts characters that are invalid or have special meaning in URLs into a safe %XX format. Use it when building query strings with special characters (?q=hello world → ?q=hello%20world), embedding URLs in other URLs, constructing API requests programmatically, encoding form data, and handling international characters in URLs (é → %C3%A9). Every web developer needs this regularly.

See also: Base64 Encoder, Hash Generator, QR Code Generator, Slug Generator.

URL Encoding Reference

Commonly encoded characters: Space → %20 (or + in form data). & → %26. = → %3D. # → %23. + → %2B. / → %2F. ? → %3F. @ → %40. : → %3A. Characters that do NOT need encoding (RFC 3986 unreserved): A–Z, a–z, 0–9, -, _, ., ~.

encodeURI() in JavaScript preserves the URL structure; encodeURIComponent() encodes everything including /, ?, & — use the latter for individual parameter values.

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.
What is the difference between encodeURI and encodeURIComponent?
encodeURI() encodes a full URL, preserving characters that have structural meaning (:, /, ?, &, #, =). encodeURIComponent() encodes a URL component (like a query parameter value), encoding those structural characters too. Rule: use encodeURI() for complete URLs; use encodeURIComponent() for individual parameter values. Example: encodeURIComponent('price=10&currency=CAD') → 'price%3D10%26currency%3DCAD'.
Why are spaces encoded as %20 in some places and + in others?
%20 is the correct percent-encoding for a space per RFC 3986 (the URL standard). The + encoding for spaces comes from HTML form encoding (application/x-www-form-urlencoded), which pre-dates RFC 3986. Both are valid in query strings, but %20 is universally correct and preferred in modern APIs. If you see a + in a URL path (not query string), it means a literal plus sign, not a space.

By Bam's Thinkery — Updated