Encoding query string parameters correctly
The tool has two modes. Component mode (encodeURIComponent) is for one parameter name or value; Full URL mode (encodeURI) is for a complete URL that is already correctly structured. Mixing them up is the most common cause of broken query strings.
Worked example
Full URL mode keeps the & inside the value, so a server reads two parameters instead of one.
- Input
- https://example.com/search?q=salt & pepper&page=2
- Result ·
encodeURI() - https://example.com/search?q=salt%20&%20pepper&page=2
Parameters a server reads
- "q" = "salt "
- " pepper" = ""
- "page" = "2"
Encoding the value in component mode first keeps it as a single parameter.
- Input
- salt & pepper
- Result ·
encodeURIComponent() - salt%20%26%20pepper
https://example.com/search?q=salt%20%26%20pepper&page=2
Parameters a server reads
- "q" = "salt & pepper"
- "page" = "2"
Component mode vs Full URL mode, character by character
| Character | Component | Full URL |
|---|---|---|
| : | %3A | : |
| / | %2F | / |
| ? | %3F | ? |
| # | %23 | # |
| & | %26 | & |
| = | %3D | = |
| + | %2B | + |
| ␠ | %20 | %20 |
| é | %C3%A9 | %C3%A9 |
How the tool handles it
- Encode each parameter name and value separately in component mode, which escapes & = ? # + and /.
- Join the encoded pairs as name=value with & between them, and add the result after ? in the URL.
- Use Full URL mode only on an entire URL: it keeps : / ? # & = + intact, so it cannot protect a value that contains them.