What is percent-encoding?

Percent-encoding, also called URL encoding, replaces unsafe characters with a percent sign followed by two hex digits of their UTF-8 bytes. A space becomes %20 and an ampersand becomes %26, so the URL stays unambiguous.

What is the difference between component and full-URI scope?

Component scope (encodeURIComponent) escapes reserved delimiters like the ampersand, equals, slash and question mark, suitable for one value. Full-URI scope (encodeURI) leaves those delimiters intact so a complete URL still works.

Which characters are never escaped?

The unreserved set A to Z, a to z, 0 to 9, and the symbols hyphen, underscore, dot, tilde — plus a few others — are left as-is. Everything else, including spaces and non-ASCII, is percent-encoded from its UTF-8 bytes.

How are non-ASCII characters handled?

They are first encoded to UTF-8, then each byte is percent-encoded. So an accented or emoji character can expand into several percent-escapes, one per UTF-8 byte.

Why does decoding sometimes fail?

Decoding fails when the input has a malformed escape — a lone percent sign or invalid hex digits, such as %2 or %ZZ. The tool reports this rather than returning broken text.

What is the URL Percent-Encoder?

Percent-encode or decode a URL or URI component, escaping spaces, non-ASCII and reserved characters per RFC 3986. Choose component scope to escape delimiters too, or full-URI scope to preserve them. Free, instant, browser-based. It runs free in your browser on Gera Tools, with nothing uploaded.

URL Percent-Encoder — Gera Tools

Name: URL Percent-Encoder
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

What percent-encoding does

URLs may only contain a limited set of characters. Percent-encoding (URL encoding) lets you safely put spaces, accented letters, emoji and reserved punctuation into a URL by replacing them with % followed by the two hex digits of each UTF-8 byte. This tool encodes and decodes in both directions, with a scope switch for the two situations that matter.

How it works

There are two encoding rules, matching the two JavaScript builtins:

Component (encodeURIComponent): escapes everything except
  A-Z a-z 0-9 - _ . ! ~ * ' ( )
  so & = ? / # : @ are all percent-encoded.

Full URI (encodeURI): additionally leaves the reserved
  delimiters ; , / ? : @ & = + $ # untouched
  so a complete URL keeps working.

For any character outside the safe set, the tool first encodes it to UTF-8 and then percent-encodes each resulting byte. Decoding reverses this, reading %XX triplets, reassembling the UTF-8 bytes, and rendering the original characters.

When to use Component vs Full URI scope

Choosing the wrong scope is the most common mistake:

Component scope is for individual values you are inserting into a URL — a search query, a redirect destination, a filename in a path segment, a form field value. It must escape &, =, +, /, and ? because those characters have structural meaning in a URL. Failing to do so silently corrupts the query string.
Full URI scope is for encoding an already-assembled URL (for example, before placing it in an href or a Location header). It leaves the structural delimiters intact so the URL still parses correctly.

A common bug: taking a redirect URL like https://example.com/go?next=https://other.com/path and encoding the entire value with Full URI scope. The inner URL’s ://, /, ? survive untouched and the outer parser cannot tell where the redirect target ends. The correct move is to Component-encode only the inner URL before assembling the outer one.

Multi-byte characters explained

Characters outside ASCII encode to multiple UTF-8 bytes, each producing its own %XX escape. The café example:

é  →  UTF-8 bytes: 0xC3 0xA9  →  %C3%A9

An emoji like 🎉 has four UTF-8 bytes and becomes %F0%9F%8E%89. This is why a short accented word can look far longer after encoding — the visual character count and the byte count diverge.

Example and practical notes

The query value Geo Café & co should use Component scope, producing Geo%20Caf%C3%A9%20%26%20co — note the ampersand becomes %26 so it is not mistaken for a parameter separator, and the é expands into two bytes %C3%A9. If you instead encode an entire URL such as https://x.com/a b?q=1, use Full URI scope so the ://, /, ? and = are preserved. Decoding rejects malformed escapes like %2 or %ZZ with a clear error rather than silently corrupting the text.

The tool handles both directions and both scopes in your browser — nothing you encode or decode is transmitted anywhere.