URL encoding is a developer tool technique that makes URL data safe to transmit and parse by replacing special characters with % plus hexadecimal bytes.
It is useful when building query strings, path segments, redirect URLs, and API requests that contain spaces or reserved characters.
It does not encrypt data or hide sensitive values.
Quick Answer
Use this rule of thumb:
- Encode data values with
encodeURIComponent(). - Encode a full URL string with
encodeURI(). - Decode with
decodeURIComponent()ordecodeURI()at read time.
Example:
- Raw value:
cats & dogs - Correct query part:
search=cats%20%26%20dogs - Full URL:
https://example.com/?search=cats%20%26%20dogs
Key Takeaways
- URL encoding prevents reserved characters from being misread as URL syntax.
- The same character can be valid in one URL part and unsafe in another.
encodeURIComponent()is usually the safer default for user input.- Double encoding is a common production bug (
%20becomes%2520).
How URL Encoding Works
Simple Model
A URL has structure (/, ?, &, =) and data (values you pass). If a value includes structural characters, the parser can confuse data with structure. Encoding removes that ambiguity.
Technical Model
Percent-encoding uses this format:
%HH
HH is two hexadecimal digits representing a byte of UTF-8 encoded data.
Example with a space:
- Space byte in UTF-8:
0x20 - Encoded form:
%20
Example with non-ASCII text café:
- UTF-8 bytes:
63 61 66 C3 A9 - Encoded:
caf%C3%A9
Safe, Reserved, and Commonly Encoded Characters
| Character class | Typical behavior |
|---|---|
A-Z a-z 0-9 - _ . ~ |
Usually safe as-is |
Reserved URL syntax (?, &, =, #, /) |
Encode when used as data |
| Space and many symbols | Usually encode |
| Non-ASCII characters | Encode as UTF-8 bytes |
Common encodings:
| Character | Encoded |
|---|---|
| Space | %20 (or + in form-encoding) |
& |
%26 |
= |
%3D |
? |
%3F |
# |
%23 |
% |
%25 |
encodeURI vs encodeURIComponent
| Function | Best for | Keeps structural characters? |
|---|---|---|
encodeURI() |
Whole URL | Yes |
encodeURIComponent() |
Individual value/segment | No (encodes most syntax chars) |
encodeURI('https://example.com/search?q=cats & dogs')
// https://example.com/search?q=cats%20&%20dogs
encodeURIComponent('cats & dogs')
// cats%20%26%20dogs
Decision rule:
- If you are interpolating user input into a URL, encode the input with
encodeURIComponent()before concatenation.
Worked Examples
Example 1: Query Parameters
Goal: search for red shoes & socks
const q = encodeURIComponent('red shoes & socks');
const url = `https://shop.example/search?q=${q}`;
// https://shop.example/search?q=red%20shoes%20%26%20socks
Example 2: Path Segment With Space
File name: my report.pdf
const file = encodeURIComponent('my report.pdf');
const url = `https://files.example/download/${file}`;
// https://files.example/download/my%20report.pdf
Example 3: Edge Case (Double Encoding)
const once = encodeURIComponent('a b');
// a%20b
const twice = encodeURIComponent(once);
// a%2520b (usually wrong)
Common Mistakes
1. Encoding Too Late
Wrong:
const url = `https://api.example/search?q=${userInput}`;
Correct:
const url = `https://api.example/search?q=${encodeURIComponent(userInput)}`;
2. Using encodeURI() for a Parameter Value
encodeURI() leaves & and = untouched, which can split a value into fake parameters.
3. Treating Encoding as Security
Encoding improves transport correctness, not confidentiality or integrity.
4. Mixing %20 and + Rules
+ for spaces is specific to form-style encoding (application/x-www-form-urlencoded), not universal URL representation.
Comparison: URL Encoding vs Similar Transformations
| Method | Purpose | Reversible | Security feature |
|---|---|---|---|
| URL encoding | Safe URL transport/parsing | Yes | No |
| Base64 | Binary-to-text representation | Yes | No |
| Hashing | One-way fingerprint | No | Integrity checks, not secrecy |
| Encryption | Protect data confidentiality | Yes (with key) | Yes |
Use URL encoding when the problem is parser-safe transport inside URLs.
URL Encoder/Decoder
Encode or decode values instantly in your browser for query strings and path segments.
Open ToolFAQ
What is URL encoding in one sentence?
URL encoding (percent-encoding) replaces unsafe URL characters with % plus hexadecimal bytes so URLs stay parseable.
When should I use encodeURIComponent()?
Use it for parameter values, user input, and individual path segments.
When should I use encodeURI()?
Use it only when encoding a full URL string that already contains separators like ?, &, and #.
Is URL encoding the same as encryption?
No. Encoded text is easy to decode and should never be treated as secret.
Why does % turn into %25?
Because % is the escape prefix in percent-encoding. A literal percent sign must be escaped.
Should I encode slashes (/)?
Encode / only when it is data inside one segment. Do not encode separator slashes between segments.
Can a URL be encoded more than once?
It can, but that often causes bugs. Double encoding changes data and can break routing or signatures.
Do browsers automatically encode URLs?
Browsers may normalize some characters, but behavior varies by context. Application code should encode values explicitly.
What is the safest default for user text?
Treat user text as data and run it through encodeURIComponent() before inserting it into a URL.
How do I test an encoded value quickly?
Use the URL Encoder/Decoder to convert both directions and verify expected output.
Related Tools
- URL Encoder/Decoder - Convert URL text to and from percent-encoding
- URL Parser - Inspect URL parts and query parameters
- Base64 Encoder/Decoder - Convert raw text to Base64 and back
- JWT Decoder - Inspect Base64URL-encoded token parts
Trust and Limitations
- The URL Encoder/Decoder runs in-browser; this article describes encoding behavior, not transport security.
- URL encoding does not validate inputs or prevent injection by itself.
- Always pair encoding with correct server-side validation and output escaping.