URL Parser & Encoder
Nothing leaves your browser
Take a URL apart, edit its query parameters and see the result in the URL, and see exactly how encodeURI, encodeURIComponent and form encoding differ.
Everything is worked out in this tab; nothing is sent anywhere.
Take a URL apart
Encode and decode
| Method | Encoded | Copy |
|---|---|---|
| encodeURIComponentOne piece of a URL: a query value, a path segment. Encodes everything that has a meaning in a URL. | Type some text above. | |
| encodeURIA whole URL. Keeps the punctuation that structures it (: / ? # & = @ and more) and encodes the rest. | Type some text above. | |
| Form (x-www-form-urlencoded)A form body or a query string written by a browser. A space becomes +, and more characters are encoded. | Type some text above. |
How the methods treat each character
| Character | encodeURIComponent | encodeURI | form |
|---|---|---|---|
| space | %20 | %20 | + |
| / | %2F | / | %2F |
| ? | %3F | ? | %3F |
| # | %23 | # | %23 |
| & | %26 | & | %26 |
| = | %3D | = | %3D |
| + | %2B | + | %2B |
| : | %3A | : | %3A |
| @ | %40 | @ | %40 |
| $ | %24 | $ | %24 |
| , | %2C | , | %2C |
| ; | %3B | ; | %3B |
| ! | ! | ! | %21 |
| ' | ' | ' | %27 |
| ( | ( | ( | %28 |
| ) | ) | ) | %29 |
| * | * | * | * |
| ~ | ~ | ~ | %7E |
| % | %25 | %25 | %25 |
| é | %C3%A9 | %C3%A9 | %C3%A9 |
Use encodeURIComponent for one value, encodeURI for a whole URL that is already well-formed, and the form style for what a browser sends from an HTML form. Encoding text that is already encoded turns every % into %25.