URL Encoder & Decoder

The Problem With Special Characters in URLs

A URL is a carefully structured string: scheme, host, path, query, fragment — each part separated by characters that carry structural meaning. The slash separates path segments. The question mark introduces the query. Ampersand divides parameters. Equals signs link keys to values. When your actual data contains any of these characters, the browser and server cannot tell data apart from structure.

That's the problem percent-encoding solves. Any character that could be misread is replaced with % followed by its two-digit hex value. A space that would break a URL becomes %20. An ampersand inside a parameter value that would be misread as a separator becomes %26. The structure is preserved; the data travels intact.

encodeURIComponent vs encodeURI — The One Distinction That Matters

JavaScript provides two encoding functions, and the difference trips up even experienced developers. encodeURIComponent() encodes everything except letters, digits, and four unreserved symbols (- _ . ~). Use it on individual values — query parameter values, path segment data, anything that is data inside the URL.

encodeURI() preserves the structural characters (: / ? # & =) because it's designed to encode an entire URL where those characters form the structure. Use it only when you have a complete URL that may contain whitespace or non-ASCII characters in its components, but whose structure is already valid.

When in doubt, use Component mode (this tool's default). Encoding a query value with encodeURIComponent is always safe. If you're comparing encoded output with tokens from other systems, the Hash Generator or Base64 Encoder can help verify the encoding on the other end.

Non-ASCII Characters and UTF-8

URLs are defined in terms of ASCII. Any character outside that range — accented letters, CJK characters, emoji, Arabic, Cyrillic — must first be encoded as UTF-8 bytes, then each byte percent-encoded individually. The Chinese character 中 becomes %E4%B8%AD (three UTF-8 bytes). The rocket emoji 🚀 becomes %F0%9F%9A%80 (four UTF-8 bytes). This tool handles all UTF-8 conversion transparently.

When to Encode — and When Not To

• Always encode query parameter values: Any value passed as a query parameter must be encoded before building the URL string. key=value with spaces&special must become key=value%20with%20spaces%26special.
• Encode path segments that contain slashes: If a file name or ID contains a forward slash, it must be encoded as %2F so the server doesn't treat it as a path separator.
• Don't encode the whole URL structure: If you already have a valid URL like https://example.com/path?q=value, don't run the entire thing through encodeURIComponent — it will destroy the structure by encoding the :// and ?.
• OAuth and authentication flows: OAuth redirect URIs and state parameters in query strings must be encoded. The Base64url tokens inside those parameters may need separate Base64 encoding.
• Webhook callback URLs: When passing a callback URL as a query parameter (e.g., ?callback=https://...), encode the entire callback URL value. Slashes, colons, and question marks inside the value all need encoding.
• HTML attributes containing URLs: URLs embedded inside HTML attributes like href or action may need entity encoding in addition to URL encoding. Pair this with the HTML Encoder for such cases.

Decoding Encoded URLs for Debugging

Server logs, analytics tools, and error trackers often show URLs in their raw percent-encoded form. Reading %E2%80%93 when you want to know if that's an en-dash, or trying to interpret %7B%22userId%22%3A123%7D in a log entry, is tedious. Switch this tool to Decode mode and paste in any encoded string to see its human-readable form instantly. After decoding a URL that contains JSON in a query parameter, paste the JSON into the JSON Formatter to explore the structure.

Privacy

All encoding and decoding runs inside your browser using JavaScript's native encodeURIComponent() and decodeURIComponent() functions. No URLs, tokens, or API keys you type here are transmitted anywhere. Safe for working with production credentials and sensitive query parameters.

✓Verified by ToollyX Team · Last updated June 2026