URL Encoder / Decoder
Encode and decode URLs and query parameters safely. Supports encodeURIComponent vs encodeURI modes and space handling as %20 or + for query strings.
Encoding
Decoding
When to use which mode?
Use encodeURIComponent when encoding a single value (e.g., a query parameter or path segment). Use encodeURI when encoding an entire URL that already contains reserved characters like :/?#[]@!$&'()*+,;=
which should remain meaningful.
- encodeURIComponent: email addresses, search terms, query values, slug parts
- encodeURI: full links you plan to place in anchor tags or redirects
Practical examples
Encode a query value
const value = 'hello world & coffee'; const encoded = encodeURIComponent(value); // 'hello%20world%20%26%20coffee' const url = 'https://example.com/search?q=' + encoded;
Encode a full URL
const url = 'https://example.com/page?utm_source=newsletter&lang=en'; const safe = encodeURI(url); // preserves :, /, ?, =, & but encodes spaces, etc.
Space handling: %20 vs +
In URLs, spaces are percent-encoded as %20
. In HTML form query strings, spaces are commonly represented as +
. Choose the option that matches your backend or target API.
- %20: safer default for general URL contexts
- +: typical for application/x-www-form-urlencoded query strings
Common pitfalls
- Double encoding: calling an encoder multiple times can turn
%
into%25
. - Wrong mode: using encodeURI for a value may leave characters unescaped.
- Plus handling:
decodeURIComponent
does not convert+
to space; switch the setting or replace+
with%20
first.
FAQs
Should I encode the full URL or just parameters?
Encode parameters with encodeURIComponent. Use encodeURI only if you must encode an entire URL string.
Why do I see %20 and sometimes + for spaces?
%20
is the standard percent-encoding for spaces; +
is common in form-encoded query strings. Both represent spaces depending on context.
Is decoding safe?
Decoding trusted, properly encoded data is safe. Never blindly decode untrusted input without validation.