🔗 URL Encoder & Decoder
A URL encoder decoder with a full percent-encoding reference and the encodeURI vs encodeURIComponent difference that quietly breaks query strings.
What URL Encoder & Decoder Does
Percent-encoding replaces characters that would otherwise have structural meaning in a URL, or that cannot be transmitted safely, with a percent sign followed by two hexadecimal digits. RFC 3986 defines which characters are safe and which are reserved.
The distinction that causes most bugs is between encoding a whole URL and encoding one value inside it. A query parameter containing "a&b=c" must have its ampersand and equals sign encoded, or the server will read them as separators and the value will be silently truncated.
Encoding and decoding here run in your browser. The reference table below gives the codes people actually look up, and the sections after it cover the two mistakes that produce most real-world breakage: using the wrong encode function, and encoding something twice.
How to Use URL Encoder & Decoder
- Choose "Encode" or "Decode" mode
- Paste your URL or encoded string
- Click the action button to process
- Copy the encoded or decoded result
Percent-Encoding Reference
The codes most often looked up. Verified against the JavaScript engine — note that encodeURIComponent deliberately leaves ! ' ( ) * unencoded even though some encoders escape them.
| Character | Code | Character | Code |
|---|---|---|---|
| space | %20 | ; | %3B |
| ! | %21 | = | %3D |
| " | %22 | ? | %3F |
| # | %23 | @ | %40 |
| $ | %24 | [ | %5B |
| % | %25 | \ | %5C |
| & | %26 | ] | %5D |
| ' | %27 | ^ | %5E |
| + | %2B | ` | %60 |
| , | %2C | { | %7B |
| / | %2F | | | %7C |
| : | %3A | } | %7D |
| < | %3C | > | %3E |
Which Function to Use
Encoding the same URL three ways. The difference is which characters are treated as structure and which as data.
| Function | Leaves alone | Use for |
|---|---|---|
| encodeURI | : / ? # [ ] @ & = + $ , | A complete URL you want to keep working |
| encodeURIComponent | A–Z a–z 0–9 - _ . ~ ! ' ( ) * | One parameter value going into a URL |
| encodeURI on "https://example.com/a b?x=1" | Result: https://example.com/a%20b?x=1 | Only the space is escaped; the URL still functions |
| encodeURIComponent on the same string | Result: https%3A%2F%2Fexample.com%2Fa%20b%3Fx%3D1 | Everything escaped — correct only if this whole string is a value |
Reserved vs Unreserved (RFC 3986)
| Class | Characters | Behavior |
|---|---|---|
| Unreserved | A–Z a–z 0–9 - _ . ~ | Never need encoding; encoding them changes nothing semantically |
| Reserved (general delimiters) | : / ? # [ ] @ | Structural. Encode when they are data, not structure |
| Reserved (sub-delimiters) | ! $ & ' ( ) * + , ; = | Meaning depends on the URL component |
| Everything else | space, ", <, >, %, {, }, |, \, ^, `, non-ASCII | Must be encoded |
Source: RFC 3986 — Uniform Resource Identifier (URI): Generic Syntax
How to Read Your Result
Space is %20 in a path and + in a form
Both are correct, in different places. Percent-encoding gives %20. HTML form submission uses application/x-www-form-urlencoded, which encodes a space as +. The trap is that they do not round-trip through the same function: decodeURIComponent("a+b") returns "a+b", not "a b" — the plus is left as a literal. If you are parsing a query string by hand, replace + with a space before decoding, or use URLSearchParams which handles it.
Double encoding produces %2520
Encode "a b" once and you get "a%20b". Encode that result again and the percent sign itself is escaped, giving "a%2520b". Seeing %25 followed by two more hex digits in a log or a URL is the signature of a value that was encoded twice — usually because one layer of a stack encodes and another layer encodes again. Decode once and check before adding another encode call.
Encode values, not whole URLs
The most common real bug is building a URL by encoding the entire thing. That escapes the :// and the ? and the &, so the browser treats the whole string as a single relative path. Build the URL from parts, encoding only each parameter value — or use the URL and URLSearchParams APIs, which get this right by construction.
Non-ASCII becomes multiple bytes
Percent-encoding operates on bytes, not characters, and modern URLs use UTF-8. A character outside ASCII becomes two, three or four percent triplets — "é" is %C3%A9, and an emoji is four triplets. That is correct behavior, not corruption, and it is why an encoded non-English string looks far longer than the original.
Limitations & Accuracy Notes
- This tool uses the browser's encodeURIComponent and decodeURIComponent. Those follow RFC 3986 with the documented exception that ! ' ( ) * are left unencoded — some server-side encoders escape them, so output may differ slightly from another tool.
- Decoding a malformed sequence — a stray percent sign, or %ZZ — throws rather than guessing. That is deliberate; silently repairing broken input hides bugs.
- Form encoding (+ for space) is not the same as URI encoding (%20). This tool does URI encoding; convert plus signs yourself if you are handling form data.
- Internationalized domain names use Punycode in the host portion, not percent-encoding. Only the path and query are percent-encoded.
- Encoding is not encryption or obfuscation. Anything you encode is trivially readable by anyone who receives it.
Frequently Asked Questions
What is URL encoding?
When should I URL encode?
What is the difference between encodeURI and encodeURIComponent?
Why is a space sometimes %20 and sometimes a plus sign?
Which characters actually need encoding?
Can I encode the same string twice?
Does this work on non-English characters?
Is anything sent to a server?
References & Further Reading
- RFC 3986 — URI Generic Syntax — Defines reserved, unreserved and percent-encoded octets
- ECMA-262 — encodeURI / encodeURIComponent — The normative behavior of the functions this tool uses, including the unescaped set