URL Encoder and Decoder

What URL encoding is for

A URL has a strict syntax. A handful of characters — the colon, slash, question mark, hash, ampersand, equals sign, and a few others — act as structural delimiters that mark where the scheme, host, path, query, and fragment begin and end. Any data you want to carry inside one of those parts must avoid colliding with the delimiters, and any byte outside the small set of URL-safe characters must be escaped. Percent-encoding solves both problems: each unsafe byte is written as a % followed by its two-digit hexadecimal value, and multi-byte UTF-8 characters become a run of those escapes.

This tool wraps the four standard JavaScript primitives. encodeURIComponent escapes everything that is not an unreserved character, so it is the right choice for a single query value or path segment. encodeURI assumes you have already assembled a complete URL and leaves the reserved delimiters intact so the address keeps working. The two decode functions reverse each direction. Because they are the browser's own implementations, the output matches exactly what your application code will produce at runtime.

When to use it

Reach for component encoding whenever you build a query string or insert user data into a path — a search term, an email address, a redirect target, or a base64 token that contains +, /, or =. Reach for full-URL encoding when you have a finished address that contains spaces or accented characters and you only want the unsafe bytes fixed, not the structure rewritten. On the decode side, paste a percent-encoded value from a server log, a browser address bar, or an OAuth redirect_uri to read it back as plain text and confirm it was encoded correctly.

Input and output

The input box takes any text. The result panel shows the converted string plus badges with the active mode, the character count, and the UTF-8 byte count, so you can spot expansion at a glance — one accented letter or one reserved character often becomes three or more output characters. The + versus %20 toggle applies only to the two encode modes: with it on, spaces become + for form-style query values; with it off you get the standards-default %20. On decode modes the toggle additionally turns a literal + back into a space first, matching how form data is read. Decoding is wrapped in a guard: a lone % or an invalid escape produces a clear inline error showing the offending sequence rather than a wrong or partial value.

Common mistakes

• Using encodeURI on a query value. It leaves &, =, ?, and + unescaped, so a value containing them can break out of its field and corrupt the query. Use component encoding for individual values.
• Assuming + always means space. A plus sign decodes to a space only in form-urlencoded data. In a path, + is a literal plus; decoding it as a space silently changes the value.
• Double-encoding. Encoding an already-encoded string turns each % into %25. If you see %2520, a value was encoded twice — decode once, then re-check.
• Ignoring a decode error. A URIError means the input is not valid percent-encoding. Fix the source rather than stripping the %, which would hide a real bug.
• Encoding the whole URL with component encoding. That escapes the :// and slashes, producing a string that is no longer a usable address.

Related tools