URL Encode and Decode Errors: Common Causes and Fixes

URL encoding looks simple until a parameter breaks, a % causes an error, or a value gets decoded twice.

Most bugs come from mixing full URLs, query components, and already-encoded strings.

Encode Components, Not Whole URLs

Use component encoding for parameter values:

const q = encodeURIComponent('red shoes & socks');

This keeps & from being interpreted as a query separator.

Do not blindly run encodeURIComponent() over an entire URL unless you really want to encode https://, /, ?, and &.

Watch for Double Encoding

Double encoding turns %20 into %2520:

space -> %20 -> %2520

If you see %25, check whether the value was encoded more than once.

Malformed Percent Escapes

Decoding can throw a URIError when the string contains invalid percent escapes or invalid Unicode sequences.

Examples that are suspicious:

abc%
abc%2
abc%ZZ

Spaces, Plus Signs, and Query Strings

Spaces can appear as %20 or +, depending on the context. In normal URL encoding, %20 is the clear representation. In form-style query encoding, + is often interpreted as a space.

That matters when decoding search queries, email addresses, coupon codes, and Base64-like strings. A literal plus sign in a query parameter may need to be encoded as %2B so it does not turn into a space.

Debugging Checklist

When a URL breaks, separate the problem into parts:

| Part | What to check | | --------------------- | ------------------------------------------ | | Full URL | Scheme, host, path, query separator, hash. | | Query key | Whether the key itself needs encoding. | | Query value | Use encodeURIComponent() for user input. | | Already encoded value | Avoid encoding % again unless intended. |

If you are building URLs in code, prefer URL and URLSearchParams where available. They reduce manual mistakes around ?, &, =, spaces, and Unicode.

For bug reports, keep the original URL before decoding it. Once a string has been decoded twice, it can be hard to know whether the server, browser, proxy, or frontend code introduced the broken value.

Quick Answer

Encode query parameter values with encodeURIComponent(), avoid encoding an already-encoded value, and treat malformed % sequences carefully before decoding. If decoding throws, the input is not valid URL encoding.

Useful references:

• MDN: encodeURIComponent()
• MDN: URIError malformed URI sequence