URL Encode & Decode
Percent-encode or decode a URL or a query value — choose Component mode for a single value, or Full URI mode for a complete URL.
Output will appear here…
How to use it
- Pick Encode or Decode.
- When encoding, choose Component if you're encoding a single value (like a query parameter) or Full URI if you're encoding an entire, already-structured URL.
- Paste your text or URL and click the action button.
- Copy the result — the difference between the two modes will be visible immediately in how characters like
&,?, and/are handled.
What's actually happening
Both modes use the browser's native encoding functions — nothing reinvented here, since getting percent-encoding subtly wrong causes real bugs. Component mode calls encodeURIComponent(), which escapes every character that isn't a letter, digit, or one of - _ . ! ~ * ' ( ). That includes & = ? / #, because those characters are structurally significant in a URL and would corrupt it if left raw inside a single value.
Full URI mode calls encodeURI(), which assumes you're handing it an entire, already-valid URL. It leaves the structural characters (: / ? # [ ] @ & = + $ , ;) alone and only escapes things that are unsafe in any part of a URL, like spaces and non-ASCII characters. Decoding mirrors this with decodeURIComponent() and decodeURI() respectively.
Worked example
Say you're building a search URL where the query itself contains an &:
rock & roll music
rock%20%26%20roll%20music
Dropped into a URL: https://example.com/search?q=rock%20%26%20roll%20music — the encoded %26 keeps the ampersand from being misread as a second query parameter separator. If you'd used Full URI mode on the whole finished URL instead, the real & and ? that make up the URL's structure would be left untouched, and only the space would be escaped.
Reference: what gets encoded
| Character | encodeURIComponent | encodeURI |
|---|---|---|
| Space | %20 | %20 |
& | %26 | left as-is |
? | %3F | left as-is |
/ | %2F | left as-is |
# | %23 | left as-is |
= | %3D | left as-is |
| Letters/digits | left as-is | left as-is |
Frequently asked questions
What's the difference between encodeURI and encodeURIComponent?
encodeURI is meant for encoding a complete URL, so it leaves structurally meaningful characters like ':', '/', '?', '&', '#' untouched. encodeURIComponent is meant for encoding a single piece — like a query value — so it encodes those same characters too, since they'd otherwise break the URL's structure.
Why did my "&" or "=" get encoded when I only wanted to encode a value?
That's Component mode working as intended. If a value will sit inside a query string, "&" and "=" need to be encoded, or the encoded value could accidentally create new parameters. Use Full URI mode only when encoding an entire URL that already has its structure in place.
Why does a space become %20 in one context and + in another?
%20 is the standard percent-encoding for a space, and what encodeURIComponent produces. The "+" convention comes from the older application/x-www-form-urlencoded format used in HTML forms — a separate encoding this tool does not produce, to avoid ambiguity.
Can decoding a URL fail?
Yes. If the input contains a "%" not followed by two valid hex digits, decoding throws a URIError. This tool catches that and shows a clear message instead of a blank or broken result.
Should I encode an entire URL or just parts of it?
Encode only the dynamic parts — usually query values or path segments with user input — using Component mode. Encoding a whole finished URL with Full URI mode is mainly useful when it contains spaces or unicode that need escaping while its structure stays intact.
About this tool
encodeURIComponent/decodeURIComponent and encodeURI/decodeURI — the same functions your JavaScript code would call. It does not implement the older application/x-www-form-urlencoded convention (where spaces become +), which is a distinct standard used specifically for form submissions.