URL encode/decode without traps: %20, +, unicode, double encoding

Practical guide for query params: encodeURI vs encodeURIComponent, spaces, +, decode errors, real cases.

Updated: 2026-03-22

On this guide

How to use this guide well

These guides are more useful when you read them as operational help, not as filler documentation.

Start from the section that matches the failure

Do not read linearly if you do not need to. Jump to the section that looks closest to the incident, payload, or config you are debugging.

Copy only after you understand the constraint

The useful part is usually in the caveat, not in the snippet itself: timezone, dialect, schema, audience, type inference, or portability.

Then validate with the tool

Once the reasoning is clear, use the related tool to inspect the real value, payload, or expression instead of working from memory.

A quick scan before you dive in.

Sections

Code examples

A short workflow tuned to the type of issue this guide covers.

Separate raw from encoded values

Keep the original string visible so you can spot whether the issue is missing encoding or double encoding.

Encode by component

Validate query params, path segments, and full URLs differently because each surface has different escaping rules.

Compare end-to-end output

Inspect what the browser, server, and logs finally receive before deciding where the corruption happens.

Encoding a full URL vs encoding a query param are different. In form-encoded contexts, + can mean space.

encodeURI for full URLs, encodeURIComponent for param values.

Double encoding (%2520), malformed % sequences, mixing URL vs value encoding.

decodeURIComponent fails due to invalid % sequences. Avoid double encoding.

Use the matching tool when you want to validate or reproduce the issue described in this guide.

Validate and format JSON with clear errors and quick copy.

Convert text to Base64 and back with Unicode support.

Encode and decode URLs with clear error handling.

Move between deep guides and shorter task-focused articles so the site works like a connected knowledge base, not a dead end.

Practical guide: edge cases, realistic formats, consistency, sizes, and a QA/frontend checklist.

Practical guide: digit rule, real examples, timezone, pitfalls, and tips to avoid expensive bugs.