How URL Encoding Works (Percent Encoding)

Percent encoding (also called URL encoding) replaces unsafe or reserved characters with a % followed by two hexadecimal digits. Those digits are the byte value of the character in the encoding you chose — almost always UTF-8 on the modern web.

Example: a space becomes %20. The ampersand & becomes %26 when it must appear as data inside a query value rather than as a parameter separator. A slash in a path segment that is not meant as a path delimiter becomes %2F.

Why URLs need it

A URL is a structured string: scheme, authority, path, query, fragment. Characters like ?, &, =, and # have structural jobs. If your data contains those characters and you paste it raw, the parser splits the string in the wrong places. Encoding turns data into a safe alphabet so structure and payload stay distinct.

• Unreserved — letters, digits, and a few marks (-, ., _, ~) usually stay as-is
• Reserved — :/?#[]@!$&'()*+,;= may need encoding depending on context
• Other bytes — must be percent-encoded (or rejected)

Try encoding a phrase with spaces and symbols in the URL encoder decoder, then decode it back. Round-trip success is the basic contract of the format.

In JavaScript (and in many online tools that mirror its rules), two helpers dominate: encodeURI and encodeURIComponent. They are not interchangeable.

encodeURI — whole URL shape

encodeURI assumes you already have a mostly complete URI and only need to escape characters that are illegal in a URI. It leaves structural separators alone: :, /, ?, &, =, #, and similar. Use it when you have a full URL string with a few unsafe characters in places that still should keep their role as separators.

encodeURIComponent — one piece of data

encodeURIComponent encodes almost everything except unreserved characters. It encodes &, =, ?, /, and more. That is what you want for a single query parameter value or a single path segment you will insert into a larger template.

• Building a query — encode each key and each value with component encoding, then join with & and =
• Fixing a full URL string — sometimes URI-mode encoding is enough; often component encoding of the dirty parts is safer
• Never run component encoding on an entire finished URL and expect the link to still work — you will encode the scheme slashes and break navigation

The free URL encoder decoder exposes both modes so you can compare output side by side before you paste into production.

When your payload is binary-ish text rather than a URL fragment, you may also see Base64 encoding — different problem, different alphabet.

Any character that is not allowed unescaped in the current part of the URL, or that would change how the URL is parsed, needs encoding. Everyday troublemakers:

• Space — %20 (older forms sometimes used + in application/x-www-form-urlencoded bodies; path and modern query practice prefer %20)
• Ampersand & — separates query pairs; encode inside values
• Equals = — separates key from value; encode inside values if needed
• Hash # — starts the fragment; encode if it is data
• Plus + — can mean space in form encoding; encode when you need a literal plus
• Percent % — starts an escape; a literal percent becomes %25
• Quotes, angle brackets, braces — often unsafe or reserved; encode for transport

Double encoding traps

If you encode twice, %20 becomes %2520. Some servers decode once and leave a literal %20 in the value; others decode twice. Prefer encode-once at the boundary where you assemble the URL. When debugging a “mystery percent,” decode step by step with the URL decoder until the string looks human again.

For pattern checks on encoded strings (for example matching %[0-9A-Fa-f]{2}), a regex tester helps you validate sequences without guessing.

Query strings are where encoding bugs show up most often. Structure is ?key1=value1&key2=value2. Keys and values are data; the ?, &, and = are syntax.

Safe assembly pattern

1. Start with the base path (already correct, no user data jammed in unescaped).
2. For each parameter, component-encode the key and the value separately.
3. Join as encodedKey=encodedValue.
4. Join pairs with &.
5. Prefix with ? once.

Example: search term cats & dogs as the value for q becomes something like q=cats%20%26%20dogs after component encoding. If you leave the ampersand raw, the server may see an extra empty parameter named dogs (or similar), and your analytics or search feature silently breaks.

APIs and frameworks

Most HTTP clients encode query objects for you if you pass a params map. Problems appear when you hand-build strings, copy from docs, or mix a pre-encoded value into a client that encodes again. Log the final request URL and decode it when results look wrong.

JSON bodies are a different layer: the body is not a URL. Still, when you embed a URL inside JSON, you only need JSON string escaping for quotes and backslashes — not percent encoding of the whole object. Validate JSON separately with a JSON formatter and validator or the JSON formatting guide.

Non-ASCII text (accented letters, CJK characters, emoji) is first converted to UTF-8 bytes, then each byte that is not an unreserved ASCII character is percent-encoded. One visible character can become multiple %XX groups.

Example idea: a single emoji is often four UTF-8 bytes, so you may see four percent triplets in the encoded form. Decoders reverse the process: percent triplets → bytes → UTF-8 string.

Internationalized domain names

Hostnames use a separate system (IDNA / punycode) so non-ASCII domains become ASCII labels like xn--.... That is not the same as percent-encoding the path. Path and query still use percent-encoding of UTF-8 for non-ASCII data after the host.

• Path and query data — UTF-8 then percent-encode
• Domain labels — IDNA/punycode for registration and DNS
• Always decode with UTF-8 unless a legacy system documents another charset

If you decode with the wrong character set, you get mojibake: garbage glyphs that no longer match the original language. When in doubt, use a tool that documents UTF-8, such as the online URL encoder decoder.

Encode at the moment you place untrusted or free-form text into a URL structure. Decode when you receive a URL or parameter and need the original human-readable value for display, storage, or business logic.

Encode when

• Building links from user input (search boxes, filters, share URLs)
• Putting file names or titles into path segments
• Sending OAuth redirects, webhooks, or callback URLs as parameter values
• Logging a single-line request target that must stay copy-pasteable

Decode when

• Showing a query value in a UI
• Comparing parameters to expected strings
• Debugging a failed redirect or 404 that “looks encoded”

Do not decode blindly in security-sensitive checks. Some attacks rely on over-decoding or mixed encodings to bypass filters. Normalize with a well-tested library and compare against allowlists where you can.

Percent encoding is transport for URLs. It is not encryption and does not hide secrets — same caution as in the Base64 guide and everyday password hygiene: encoding is not confidentiality.

When a link fails, work systematically instead of re-encoding at random.

1. Copy the exact URL from the address bar, log, or API client.
2. Identify the part that fails: host, path segment, query value, or fragment.
3. Decode once and inspect. If you still see %XX sequences that look like data, decode again carefully and note whether double encoding occurred.
4. Rebuild the URL with component encoding only on the data pieces.
5. Verify reserved characters in values are encoded and separators between pairs are not.
6. Test in the browser and in your HTTP client; they can differ on edge cases like + versus %20.

Common failure modes

• Encoding the entire URL with component mode
• Leaving spaces raw in email or SMS clients that truncate at whitespace
• Mixing form-urlencoded + rules with path encoding
• Truncating long query strings at a proxy or CDN limit

Use the free URL encoder decoder for interactive checks, keep JSON payloads valid with the JSON formatter, and treat binary text transport with the Base64 encoder decoder when the problem is not a URL at all.