URL Encode & Decode
Percent-encode text so it travels safely inside a URL — then decode it back, UTF-8 safe.
Component escapes reserved characters like & ? / = # — use it for one query value or path segment.
URL encoding replaces characters that are unsafe in a web address with a “%” followed by their hexadecimal byte value. A space becomes %20, so “hello world” becomes hello%20world. Use component encoding for a single query value or path piece, and full-URL encoding to escape a whole address while keeping its structure.
What URL encoding is
URLs may only contain a limited set of ASCII characters, and some of those — like &, ?, #, and / — have special structural meaning. Percent-encoding (also called URL encoding) lets you carry any other character safely by writing it as a “%” plus the two-digit hexadecimal value of each byte. Spaces, accented letters, and symbols are all represented this way, so the address survives copy-paste, forms, and servers without being misread.
A space is byte 0x20, so it becomes %20; é is bytes C3 A9, so it becomes %C3%A9.
Component vs full URL
The two scopes differ in what they leave untouched. Component (JavaScript’s encodeURIComponent) escapes reserved characters like &, ?, =, and / — correct when the text is a single query-string value or one path segment that must not break the surrounding URL. Full URL (encodeURI) preserves those structural characters, so it is meant for encoding an entire address that is already assembled.
- 1 Choose Encode. The Encode direction turns readable text into percent-encoded output.
- 2 Pick a scope. Use Component for one query value or path segment; use Full URL for a complete address.
- 3 Type or paste your text. Enter hello world & café to see reserved and non-ASCII characters handled together.
- 4 Read the output. In Component scope this becomes hello%20world%20%26%20caf%C3%A9 — spaces, the ampersand, and é are all escaped.
- 5 Decode to reverse it. Switch to Decode, keep the same scope, and paste the encoded string to recover the original text.
Common URL encodings
Percent-codes for characters that must be escaped inside a query value or path segment.
| Character | Encoded | Notes |
|---|---|---|
| space | %20 | A literal space; some encoders use “+” in query strings instead |
| & | %26 | Separates query parameters, so it must be escaped in a value |
| ? | %3F | Marks the start of the query string |
| # | %23 | Marks the start of a fragment/anchor |
| / | %2F | Path separator; escaped by component encoding, kept by full-URL |
| = | %3D | Joins a query key to its value |
| + | %2B | Escaped so it is not mistaken for a space in query strings |
The “+” versus “%20” nuance
Both “+” and %20 can stand for a space, but only in the query string, and only under an older form-encoding rule (application/x-www-form-urlencoded). In a path, “+” is a literal plus sign, not a space. Because of this ambiguity, encodeURIComponent always uses %20 for spaces and escapes a real “+” as %2B. When you need to protect one value that will sit inside a larger URL, encode it as a component; encode the whole thing only once it is fully built, or you will double-escape the “%” signs.