You've seen URLs that look like this:
https://example.com/search?q=hello%20world&lang=en%2FFR
Those %20 and %2F sequences aren't errors — they're URL encoding. They're the way URLs safely represent characters that would otherwise break the URL structure.
URL encoding is something developers encounter constantly — in query strings, form submissions, API integrations, OAuth flows, and redirect parameters. Understanding it prevents a whole class of subtle bugs.
Why URLs Need Encoding
URLs were designed with a restricted character set. Only certain characters are "safe" — letters, digits, and a handful of symbols (-, _, ., ~). Everything else must be encoded.
The characters that must be encoded include:
- Spaces — become
%20(or+in form data) - Special URL characters —
/,?,#,&,=have specific meanings in URL structure - Non-ASCII characters — letters like
é,中,ñ,€must be encoded
Without encoding, a space in a URL would look like the URL ended. A & inside a parameter value would look like the start of a new parameter.
Encode and Decode URLs Here
URL Encoder/Decoder
Securely encode and decode URLs and data strings.
How URL Encoding Works
URL encoding replaces unsafe characters with a % followed by two hexadecimal digits representing the character's ASCII or UTF-8 code point.
| Character | URL Encoded |
|---|---|
| Space | %20 |
@ |
%40 |
/ |
%2F |
: |
%3A |
? |
%3F |
# |
%23 |
& |
%26 |
= |
%3D |
+ |
%2B |
% |
%25 |
Non-ASCII characters are first encoded as UTF-8 bytes, then each byte is percent-encoded. The euro sign € becomes %E2%82%AC (its three-byte UTF-8 representation).
The + vs %20 Difference
This trips up many developers. There are two URL encoding standards:
application/x-www-form-urlencoded (used in HTML form submissions): spaces become +, other special chars become %XX.
RFC 3986 (used in query strings and general URLs): spaces become %20, + is literal.
If you send a + in a URL and it's decoded as a space, or vice versa, you've hit this mismatch. When in doubt, use %20 — it works in both contexts.
Real-World Scenarios
Query string parameters with user input
const searchTerm = "café & tea";
const url = `https://example.com/search?q=${encodeURIComponent(searchTerm)}`;
// Result: https://example.com/search?q=caf%C3%A9%20%26%20tea
Never concatenate user input directly into URLs. Always encodeURIComponent() first.
OAuth redirect URIs
OAuth flows pass redirect URLs as parameters. Those URLs must be fully encoded:
https://auth.example.com/oauth?redirect_uri=https%3A%2F%2Fmyapp.com%2Fcallback
Debugging a broken API call
If an API returns unexpected results or errors, decode the request URL to see what parameters were actually sent. Encoding bugs are a common cause of mysterious API failures.
URL Encoding vs. Base64 Encoding
These are often confused but serve different purposes:
| URL Encoding | Base64 | |
|---|---|---|
| Purpose | Make URLs safe | Make binary data text-safe |
| Where used | Query strings, form data | API payloads, data URIs, JWT tokens |
| Output | Percent-encoded text | Alphanumeric string |
| Reversible | ✅ Yes | ✅ Yes |
Base64 Encoder / Decoder
Encode and decode data using Base64 encoding scheme.
Privacy When Encoding URLs
URLs often contain sensitive parameters — user IDs, session tokens, search queries, redirect destinations. When debugging or constructing URLs:
- EU (GDPR): URLs containing personal identifiers (user IDs, emails in query strings) are personal data. Testing them through external cloud tools constitutes a data transfer.
- API security: OAuth tokens, API keys, and session parameters embedded in URLs should never be submitted to third-party tools.
FluxToolkit's URL encoder/decoder runs entirely in your browser. Your URLs and parameters never leave your device.
Frequently Asked Questions
What's the difference between encodeURI and encodeURIComponent in JavaScript?
encodeURI encodes a complete URL — it leaves characters like /, ?, #, and & untouched because they have structural meaning. encodeURIComponent encodes everything except letters, digits, and -_.~ — use it for individual parameter values where those structural characters should be treated as literal data.
Should I encode the entire URL or just the parameters?
Encode only the parameter values, not the structural parts of the URL. https://example.com/search?q= should stay as-is; only the value after = gets encoded.
Why does my decoded URL still show %2B for a plus sign?
Because %2B is the encoding for a literal +. If the + is supposed to represent a space (form encoding), then you need to additionally replace + with spaces after decoding.
Does FluxToolkit log my URLs?
No. Everything runs in your browser. Your URLs and query parameters never leave your device.
Related Articles
Base64 Encode and Decode: A Complete Developer's Guide — Another essential encoding format used in APIs and web development.
A Complete Guide to Decoding JWT Tokens — JWT tokens use Base64Url — understand how they fit into API workflows.
JSON Formatter and Validator — Format and validate the JSON payloads your URL parameters carry.
HTML Entities: Encoding Special Characters — HTML entity encoding is related but distinct from URL encoding.
Number Base Converter: Binary, Decimal, Hex — URL percent encoding uses hex values — understand the connection.