URL Encoder / Decoder
Encode or decode URLs and URL components. Handles percent-encoding for special characters, spaces, query strings and international characters.
The Problem URL Encoding Solves
URLs can only contain a restricted set of ASCII characters. Any character outside this safe set — including spaces, international characters, punctuation marks like &, =, and #, and many others — must be encoded before being placed in a URL. Failure to encode these characters causes malformed requests, broken redirects, and data corruption when parameters are parsed server-side. Understanding percent-encoding is fundamental to building reliable HTTP integrations.
A URL encoder converts special characters in a string to their percent-encoded equivalents — for example, a space becomes %20, a slash becomes %2F, and an ampersand becomes %26. URL decoding is the reverse operation, turning percent-encoded sequences back into readable text. This is an essential tool for DevOps engineers who work with REST APIs, redirect configurations, webhook payloads, and query string manipulation.
How It Works Under the Hood
The encoder uses JavaScript's built-in encodeURIComponent() function, which encodes every character that is not a letter, digit, hyphen, underscore, period, or tilde — the unreserved characters defined in RFC 3986. For full URL encoding (preserving structural characters like ://?#), the tool uses encodeURI() instead. Decoding uses decodeURIComponent() and decodeURI() respectively. All operations run synchronously in the browser with no network requests, making this tool safe to use with sensitive URL parameters such as API keys or access tokens embedded in query strings.
Real-World Use Cases
- Building REST API query strings: When constructing API requests with dynamic parameters — search queries, filter values, date ranges — encode each parameter value to prevent special characters from breaking the URL structure.
- Debugging redirect chains: When investigating redirect loops or broken OAuth flows, decode the URL-encoded state parameters, redirect URIs, and callback URLs to read them clearly and identify misconfigurations.
- Writing nginx and Cloudflare redirect rules: Encode special characters in rewrite targets and redirect destinations to ensure URL patterns are interpreted correctly by the web server or CDN.
- Working with webhook integrations: Decode inbound webhook payloads that include URL-encoded form data (
application/x-www-form-urlencoded) to inspect the raw field values sent by the source system.
Example Walkthrough
Suppose you're building a search endpoint and need to pass the query status: active & region=eu as a single query string value. Encoding it with encodeURIComponent() produces:
Input: status: active & region=eu
Output: status%3A%20active%20%26%20region%3DeuNotice every space, colon, ampersand, and equals sign is converted — because encodeURIComponent treats them as literal data, not URL syntax. The resulting query string is safe to append as ?q=status%3A%20active%20%26%20region%3Deu without the & being misread as a parameter separator. Decoding the same string in the tool reverses the transformation exactly, returning the original readable text — useful when you're staring at a captured request log full of percent-encoded noise and need to know what was actually sent.
Frequently Asked Questions
What is the difference between encodeURI and encodeURIComponent?
encodeURI is designed to encode a complete URL and deliberately preserves characters that have structural meaning in URLs — specifically : / ? # [ ] @ ! $ & ' ( ) * + , ; =. This means encodeURI("https://example.com/search?q=hello world") only encodes the space, leaving the rest of the URL intact. encodeURIComponent is more aggressive — it encodes everything except unreserved characters (letters, digits, - _ . ~), making it the correct choice for encoding individual query parameter values, path segments, or fragment identifiers where characters like & and = must be treated as literal data rather than URL delimiters.
When should I URL encode a parameter value?
You should URL encode every dynamic value that you insert into a URL — particularly query string parameters, path parameters, and fragment identifiers. Characters like spaces, &, =, +, #, and % have reserved meanings in URLs and will corrupt the request if left unencoded. For example, a search query of salt & pepper must be encoded as salt%20%26%20pepper to prevent the & from being interpreted as a parameter separator. In practice, always use encodeURIComponent on each parameter value individually before concatenating them into a query string.
What is the difference between %20 and + for encoding spaces?
%20 is the canonical percent-encoded representation of a space character, defined by RFC 3986, and is valid in any part of a URL including path segments, query strings, and fragment identifiers. The + character as a space encoding is specific to the application/x-www-form-urlencoded media type — the encoding used when HTML forms submit via POST or GET — and is decoded as a space only by servers that explicitly handle this format. Critically, a + in a URL path segment means a literal plus sign, not a space. If you use + where %20 is required, your space will arrive at the server as a plus sign and cause data corruption. Using %20 everywhere is the safe, unambiguous choice.