URL Encoder & Decoder — Percent Encoding, Client-Side

Percent encoding, and the one choice that matters

A URL has a limited alphabet. Anything outside it — a space, an accent, an ampersand inside a value — has to be replaced by a percent sign and the hex value of its UTF-8 bytes. Get this wrong and the symptom is rarely an error; it is a parameter that silently arrives truncated or reinterpreted.

Component or full URL

This is the decision that causes almost every URL-encoding bug, and it maps directly onto two different JavaScript functions.

Component (encodeURIComponent) escapes the reserved characters too — : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Use it for a single value you are about to drop into a query string.
Full URL (encodeURI) leaves those characters intact so the URL keeps its structure. Use it when you have a complete URL containing spaces or non-ASCII characters that you want to make transmittable.

The classic failure is encoding an OAuth redirect_uri with the full-URL function. Its ? and & survive unescaped, the authorisation server reads them as its own parameters, and you get an opaque invalid-request error that says nothing about encoding. The reverse mistake — component-encoding a whole URL — turns https:// into https%3A%2F%2F and produces a link that goes nowhere.

Plus or %20

A space becomes + under the older application/x-www-form-urlencoded rules, and %20 under standard percent encoding. Plus is only valid inside a query string — put it in a path and it stays a literal plus sign. %20 is correct everywhere, which is why it is the default here. The toggle exists because some legacy form endpoints still expect the older form.

The inspector

Paste a full URL and it is broken into scheme, host, port, path, each query parameter and the fragment, with every value decoded. Reading a long callback URL character by character to find the one parameter that is double-encoded is a genuinely miserable way to spend ten minutes, and this replaces it.

Double encoding is worth watching for specifically: if a decoded value still contains %25 or another percent sequence, something in the chain encoded it twice. It is flagged when detected.

Local only

URLs carry session tokens, signed parameters and internal hostnames. Nothing typed here is transmitted.

Questions people actually ask

Component or full URL — which do I want?

Component encoding escapes the reserved characters : / ? # & = as well, so it is right for a single query value. Full-URL encoding leaves them intact so the URL keeps its structure. Using the wrong one is why a redirect_uri parameter so often breaks.

Why does a space sometimes become + and sometimes %20?

Plus is the older application/x-www-form-urlencoded convention and is only valid in a query string. Percent-20 is correct everywhere, including in a path. Both are offered; percent-20 is the safer default.

What does the inspector show?

It splits a URL into scheme, host, port, path, each query parameter and the fragment, with every value decoded — much faster than reading a long URL character by character.