URL Encoder & Decoder
Percent-encode and decode URLs and query strings. Both component and full-URI variants supported. Live preview as you type.
input0 chars
encoded output
// output appears here as you type// how to use
Encode URLs in three steps.
- 01Pick encode or decode.The tool processes your input live as you type. Switch direction at any time with the toggle or the swap button.
- 02Choose the variant.Component mode (encodeURIComponent) is for individual values like query parameters. Full URI mode (encodeURI) preserves URL structural characters and is for whole URLs.
- 03Copy the result.The output panel shows the encoded or decoded result. Click copy and you're done.
// background
What is URL encoding?
URL encoding (also called percent-encoding) is the mechanism that lets URLs carry characters outside the small set permitted by the URI specification. Defined in RFC 3986, it replaces any unsafe character with a % followed by two hexadecimal digits representing the byte value.
For example, a space becomes %20, an & becomes %26, and a ñ (UTF-8 bytes 0xC3 0xB1) becomes %C3%B1. Without encoding, these characters would either be rejected by URL parsers or interpreted as syntax rather than data.
encodeURIComponent vs encodeURI
JavaScript exposes two built-in functions for URL encoding, and choosing the right one matters:
encodeURIComponentEncodes everything except A-Z, a-z, 0-9, - _ . ~. Use for individual query values, path segments, fragment values.encodeURIPreserves the URL structural characters :/?#[]@!$'()*+,;=. Use to encode an entire URL string while keeping it valid.When you need URL encoding
- →Building query strings programmatically (?search=hello%20world)
- →Including special characters in path segments (/users/john%2Fdoe)
- →Constructing OAuth or API request signatures
- →Embedding non-ASCII characters in URLs
- →Passing JSON payloads via query parameters
- →Working with URLs in HTML forms (application/x-www-form-urlencoded)
// faq
Frequently asked questions.
What's the difference between component and full URI encoding?+
encodeURIComponent escapes everything that isn't a basic alphanumeric, including reserved URL characters like / : ? & = #. Use it when encoding a single value (a query parameter, a path segment). encodeURI preserves the structural characters of a URL, so it's safe for encoding an entire URL string.
Why is a space encoded as %20 sometimes and + other times?+
%20 is the standard percent-encoding for a space, valid anywhere in a URL. The + sign is used specifically in the query string portion of URLs (after ?) to represent a space, following the application/x-www-form-urlencoded convention used by HTML forms. This tool produces %20 to be safe in any position.
What characters need to be URL-encoded?+
The unreserved characters (A-Z, a-z, 0-9, plus - _ . ~) never need encoding. Everything else may need it depending on context: reserved characters with special meaning (/ : ? # [ ] @ ! $ & ' ( ) * + , ; =) need encoding when used as data, and any non-ASCII characters always need encoding.
Why am I getting 'URI malformed' errors when decoding?+
decodeURIComponent expects a valid percent-encoded sequence. If your input contains a stray % followed by non-hex characters (like %ZZ or just % at the end), it throws this error. Check that every % in your input is followed by two valid hex digits.
Should I encode my entire URL or just the parameters?+
Just the parameters. If you encode an entire URL with encodeURIComponent, you'll break the structural characters (the // after https:, the / between path segments, the ? before the query). Use encodeURIComponent on individual values, then assemble the URL.
Is URL encoding the same as Base64 or HTML encoding?+
No, they're three different schemes. URL encoding (percent encoding) replaces unsafe URL characters with %XX sequences. Base64 converts arbitrary bytes to a 64-character ASCII alphabet. HTML encoding replaces special HTML characters with named or numeric entities (like & for &). Each has its own use case.
// related