URL Encoder & Decoder
Percent-encode URLs and query strings for safe use in links and HTTP headers, or decode them back to readable text. Runs entirely in your browser.
Encoded/decoded output appears hereβ¦Common Character Encoding Reference
| Character | Encoded (URI Component) | Note |
|---|---|---|
| Space | %20 | Or + in form submissions |
| & | %26 | Query string delimiter |
| = | %3D | Key=value separator |
| ? | %3F | Query string start |
| # | %23 | Fragment identifier |
| + | %2B | Literal plus sign |
| / | %2F | Path separator |
| @ | %40 | User info delimiter |
Percent-Encoding Explained: Component vs. Full URL Encoding
What This Tool Actually Does
This tool converts text to and from percent-encoded form using the browser's native JavaScript URI functions β encodeURIComponent(), encodeURI(), decodeURIComponent(), and decodeURI(). You choose a direction (Encode or Decode) and an encoding mode (component-level or full-URL), paste text into the left panel, and the right panel updates instantly. There's no network request involved: everything runs client-side, which is also why an invalid percent sequence on decode shows an error message rather than a server error page.
The two encoding modes matter because they encode different sets of characters. encodeURIComponent is built for encoding one isolated value β a search term, a redirect target, a single query parameter β so it escapes every character that could have structural meaning in a URL, including : / ? # & = @. encodeURI is built for encoding a complete, already-structured URL, so it deliberately leaves those structural characters alone and only escapes things like spaces and non-ASCII characters.
How to Use It
- Pick a direction: β Encode URL to percent-encode plain text, or β Decode URL to convert a percent-encoded string back to readable text.
- Pick an encoding mode:
encodeURIComponentfor a single value (query parameter, search term), orencodeURI (full URL)for a complete URL you want to keep navigable. - Paste or type into the left textarea β output appears in the right panel in real time as you type.
- Use the Quick example buttons (Search query, Redirect URL, Emoji / unicode) to load a working sample for either direction.
- Click Copy to copy the output, or β Swap to move the output into the input box and flip direction β useful for round-tripping a value to confirm it decodes back correctly.
- Check the reference table below the tool for the exact percent-encoded value of common characters like space, &, =, and #.
The Underlying Mechanism: RFC 3986 Percent-Encoding
URLs can only safely contain a limited set of ASCII characters. RFC 3986 defines an unreserved set β letters, digits, and - _ . ~ β that never needs encoding, and a reserved set (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) that carries structural meaning in a URL (path separators, query delimiters, fragment markers). Anything outside the unreserved set gets converted into one or more %XX triplets, where XX is the hexadecimal byte value.
For non-ASCII characters, JavaScript's encoding functions first convert the character to its UTF-8 byte sequence, then percent-encode each byte individually. That's why a single emoji or CJK character expands into several %XX groups β each group is one UTF-8 byte, not one character.
Worked Example
Load the Redirect URL example in Encode mode with encodeURIComponent selected. Input: https://example.com/page?a=1&b=2. Output: https%3A%2F%2Fexample.com%2Fpage%3Fa%3D1%26b%3D2 β notice that even the ://, ?, &, and = characters get escaped, because encodeURIComponent treats the whole string as one opaque value, not a URL with structure. That's the correct output if you intend to embed this entire URL as the value of another query parameter (for example, a redirect target: ?next=https%3A%2F%2Fexample.com%2Fpage...).
Now switch encoding mode to encodeURI (full URL) with the same input. The output keeps ://, ?, &, and = intact and unescaped, because those characters are doing their normal structural job in a real, navigable URL β only reserved-but-not-in-this-position characters or spaces would be escaped. This is the mode to use when you're encoding a URL to actually visit or link to, not to nest inside another parameter.
For the multi-byte case, load the Emoji / unicode example: input π NimbicaιεΊ¦ encodes to %F0%9F%9A%80%20Nimbica%E9%80%9F%E5%BA%A6 β the rocket emoji becomes four bytes (%F0%9F%9A%80), the space becomes %20, "Nimbica" stays literal ASCII, and each of the two Chinese characters becomes three UTF-8 bytes (%E9%80%9F and %E5%BA%A6).
Practical Use Cases
- Building redirect and callback URLs: Encode a full destination URL so it can be safely passed as the value of a
redirect_uriornextquery parameter without breaking the outer URL's structure. - Appending user-entered search terms to a query string: Encode search phrases containing spaces, ampersands, or quotes before building a
?s=search URL. - Debugging WordPress permalinks and REST API requests: Decode a percent-encoded slug or parameter copied from server logs or browser dev tools back into readable text to see what was actually requested.
- Constructing UTM tracking links: Encode campaign names or content identifiers that contain spaces or special characters before appending them as
utm_campaignorutm_contentvalues. - Inspecting webhook or API payload URLs: Decode encoded query parameters from incoming webhook requests to verify the raw values a third-party service actually sent.
Common Mistakes & Limitations
- Using encodeURIComponent on a whole URL: This escapes the
://and path slashes, producing a string that is no longer a working link β only use component mode on individual values, not complete URLs you intend to visit directly. - Using encodeURI on a single query value: Because encodeURI leaves
&and=unescaped, encoding a search term that happens to contain one of those characters with the wrong mode will silently break your query string structure. - Double-encoding: Running an already-encoded string through the encoder again turns each
%into%25, producing a value that most servers will only decode once, leaving garbled percent sequences at the destination. - Confusing + with %20: This tool always produces
%20for spaces (the RFC 3986 standard), not the+convention used specifically byapplication/x-www-form-urlencodedHTML form bodies. - Assuming decode always succeeds: Pasting text that was never encoded, or that was truncated mid-copy, produces a malformed percent sequence and a thrown error rather than a best-guess result.
Frequently Asked Questions
What is URL encoding (percent-encoding)?
URL encoding converts characters that are not allowed or have special meaning in URLs into a safe format using a percent sign followed by two hex digits (e.g., a space becomes %20, & becomes %26). It is defined in RFC 3986.
What is the difference between encodeURI and encodeURIComponent?
encodeURI encodes a full URL, preserving characters like :, /, ?, #, &, and = that have structural meaning. encodeURIComponent encodes a single query parameter value, encoding those structural characters too. Use encodeURIComponent when encoding individual parameter values.
When do I need to URL encode a string?
Any time you embed a value into a URL query string (e.g., search terms, redirect targets, UTM parameters), the value must be percent-encoded so special characters don't break the URL structure.
Does data leave my browser?
No. All encoding and decoding uses JavaScript's built-in encodeURIComponent(), encodeURI(), decodeURIComponent(), and decodeURI() functions β nothing is sent to any server.
What is the difference between + and %20 for encoding a space?
encodeURIComponent() and encodeURI() both encode a space as %20, per RFC 3986. The + character for spaces is a legacy convention specific to the application/x-www-form-urlencoded content type used by HTML form submissions (typically GET query strings from an HTML <form>), not general URL/URI encoding. If a receiving system expects +, you'll need a separate form-encoding step.
Why do I get an error when decoding?
decodeURIComponent() and decodeURI() throw a URIError when the input contains a malformed percent sequence β for example a stray % not followed by two valid hex digits, or a truncated multi-byte UTF-8 sequence. This tool catches that error and displays the exact message instead of crashing, which usually means the string you pasted wasn't fully encoded to begin with.
Which characters does encodeURIComponent() leave unencoded?
It leaves the unreserved character set untouched: A-Z, a-z, 0-9, and the four symbols - _ . ~. Every other character, including reserved URL-structure characters like : / ? # & = @, gets percent-encoded because encodeURIComponent() is designed for encoding a single value, not a full URL.
Can I safely double-encode a string, or will that cause problems?
Encoding an already-encoded string turns each % into %25, producing a double-encoded result (e.g. %20 becomes %2520). Most servers only decode once, so double-encoded values often arrive at their destination still containing literal percent sequences. Always check whether your input is already encoded before running it through this tool a second time.