URL Encoder / Decoder

What Is the URL Encoder / Decoder?

The URL Encoder converts text into a percent-encoded format that is safe to include in a URL, and the decoder reverses that process. Percent-encoding replaces characters that have special meaning in URLs, such as spaces, ampersands, equals signs, and non-ASCII characters, with a percent sign followed by two hexadecimal digits representing the character's byte value. This encoding scheme is defined in RFC 3986, the standard for Uniform Resource Identifiers.

In practice, you come across the need for URL encoding constantly: when passing user input as a query parameter, when building API request URLs programmatically, and when dealing with URLs that contain non-ASCII characters from languages other than English. The MDN reference for encodeURIComponent covers the browser's built-in encoding function in detail.

How to Use the URL Encoder / Decoder

1. Paste your text into the input field and select Encode to convert it to a percent-encoded URL-safe string.
2. To decode, paste a percent-encoded string and select Decode to recover the original text.
3. Choose between component encoding (encodeURIComponent behaviour) and full URI encoding (encodeURI behaviour). Component encoding is what you want for query parameter values. Full URI encoding is what you want for an entire URL that already has its structure in place.
4. The output updates instantly. Use the copy button to take it from there.
5. The tool also handles plus-sign encoding: some systems use + to represent spaces in query strings rather than %20. Toggle this option to match the format your target system expects.

Technical Background

RFC 3986 divides URL characters into two categories: reserved characters that have structural meaning in a URL (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) and unreserved characters that can appear literally (A-Z a-z 0-9 - _ . ~). Any other character, including spaces and non-ASCII Unicode characters, must be percent-encoded.

The encoding works by converting each character to its UTF-8 byte representation and then encoding each byte as %XX where XX is the uppercase hex value of the byte. For example, a space becomes %20, the copyright symbol © becomes %C2%A9 (its two UTF-8 bytes), and a Chinese character like 中 becomes %E4%B8%AD (its three UTF-8 bytes).

What is more, there are two encoding levels to be aware of. encodeURIComponent encodes everything except unreserved characters, which is what you need for individual query parameter values. encodeURI also encodes non-ASCII characters but leaves reserved characters intact, because it is designed for encoding an already-structured URI rather than a component within it. Using the wrong one is a common source of bugs when building URLs in JavaScript.

Common Use Cases

• Query string construction: When building a search URL like /search?q=user input dynamically, the input value must be encoded so that spaces and special characters do not break the URL structure.
• API request building: REST APIs that accept parameters in the URL require those parameters to be percent-encoded. Tools and libraries usually do this automatically, but when building URLs manually you need to encode each value.
• Redirect URLs: When passing a full URL as a query parameter value (for example in a returnUrl parameter), the entire URL must be encoded as a component so that its own ?, &, and = characters do not conflict with the outer URL's structure.
• Debugging: When a URL is not working as expected, decoding the percent-encoded version here lets you see the actual values that were passed, which makes it easier to track down where an encoding issue crept in.

For encoding strings for other purposes, the Base64 Encoder covers binary-to-text encoding. The Regex Tester is useful if you need to write a pattern to validate or extract parts of a URL programmatically.

Limitations to Know

Given that URLs have different encoding rules for different components, a common mistake is applying the wrong level of encoding. Encoding an entire URL with encodeURIComponent will encode the slashes, colons, and query characters, producing a string that is no longer a functional URL. Use component encoding only for individual values within a URL, not for the URL as a whole.

That said, the plus-sign convention for spaces (+ instead of %20) is common in HTML form submissions but is not standard in RFC 3986. Whether a system interprets + as a space or as a literal plus sign depends on the context. If you are unsure which convention the target system expects, %20 is safer because it is unambiguous.

In practice, all modern JavaScript frameworks and HTTP client libraries handle URL encoding automatically. You only need to encode manually when constructing URLs with string concatenation, which is generally a pattern worth moving away from in favour of a URL object or a URLSearchParams instance.

Conclusion

The URL Encoder / Decoder handles the practical encoding and decoding tasks that come up whenever you work with URLs that contain user input, non-ASCII text, or special characters. It supports both component-level and URI-level encoding, handles the plus-sign space convention, and decodes percent-encoded strings back to readable text for debugging. The definitive reference for URL syntax and encoding rules is RFC 3986.