URL Encode & Decode

about this tool

Component or whole URL

This is the distinction that trips people up, and getting it wrong is the cause of most broken links.

Component encoding escapes everything that has a reserved meaning in a URL, including /, ?, &, = and #. Use it for a piece of a URL — a query parameter value, a path segment, a search term. It is what JavaScript's encodeURIComponent does.

Full URL encoding leaves the structural characters alone, so the URL keeps working as a URL, and escapes only spaces and other genuinely illegal characters. Use it when you have a complete address to tidy up. It is encodeURI.

Encoding a whole URL with component rules produces https%3A%2F%2F…, which no browser will follow. Encoding a parameter value with full-URL rules leaves an & inside it intact, which silently truncates your parameter at that point — the harder bug of the two, because it looks fine until a value happens to contain an ampersand.

Spaces: %20 or +

Both appear in the wild. %20 is correct in a path and valid anywhere. + means a space only in a query string, and only under the older application/x-www-form-urlencoded rules that HTML forms use. In a path, + is a literal plus sign. When in doubt, %20 is the safe choice.

Why encoding non-English text matters

Percent-encoding operates on bytes, so text is UTF-8 encoded first, which is why one non-ASCII character becomes several escapes: é is %C3%A9. This is worth knowing because a system that encodes with a different character set produces different escapes for the same character, and that mismatch is a common cause of mojibake in search results and filenames.

This bytes-first approach is the same one Base64 takes, and the reason both handle an emoji correctly where naive implementations fail.

Inspecting a URL

Paste a full URL and its parts are broken out — scheme, host, port, path, each query parameter and the fragment — with values decoded for reading. That is usually faster than counting ampersands in a long tracking URL to find the one parameter you care about.

Double encoding

If you see %2520 you are looking at a double-encoded space: %20 where the % was itself encoded to %25. It means something encoded a value that had already been encoded. Decode twice to read it, then fix the code that did it.

Local

Encoding and decoding happen in the page. URLs frequently carry session tokens and identifiers in their parameters, so nothing is transmitted.

For turning a title into the path segment itself rather than escaping one, the slug generator transliterates accents and trims to a word boundary.

When the percent-encoded address you are decoding arrived wrapped in an email security service's own link, the safe link decoder takes the wrapper off first and shows where it really goes.

questions

Should I use encodeURI or encodeURIComponent?

Component encoding for a piece of a URL such as a query parameter value or a path segment, because it escapes the reserved characters / ? & = and #. Full-URL encoding for a complete address, because it leaves those structural characters working.

Why does my query parameter get cut off?

Because the value contained an ampersand that was not escaped, so everything after it was read as the next parameter. Encoding the value with component rules fixes it. This is the harder of the two mistakes to spot, since it only breaks on certain values.

Is a space %20 or a plus sign?

%20 is correct in a path and valid anywhere. A plus sign means a space only in a query string under form-encoding rules; in a path it is a literal plus. Use %20 when unsure.

Why does one accented character become several percent escapes?

Because percent-encoding works on bytes and text is UTF-8 encoded first, so é becomes %C3%A9. A system encoding with a different character set produces different escapes, which is a common cause of garbled text.

What does %2520 mean?

It is a double-encoded space: %20 whose percent sign was itself encoded to %25. Something encoded a value that had already been encoded. Decode twice to read it, then fix whatever did it.