URL Encoding Special Characters β€” Fix and Reference

πŸ’‘URL encoding converts special characters into percent-encoded sequences so they can be transmitted safely in a URL. The most common mistakes are using encodeURI instead of encodeURIComponent for parameter values, forgetting to encode & and =, and double-encoding an already-encoded string. Use encodeURIComponent for query parameter values and decode before re-encoding if the value is already encoded.

Quick Diagnosis

If you see β€œspaces in URL appear as + or %20” β†’ it means both are valid but context-dependent β€” + is used in form data, %20 in path segments β†’ do this: use encodeURIComponent for query parameter values (produces %20, not +)

If you see β€œ& in query string breaks parameter parsing” β†’ it means & is a query string delimiter β€” literal & must be encoded as %26 β†’ do this: encode parameter values with encodeURIComponent before appending to URL

If you see β€œURL works in browser but fails in API call” β†’ it means browser auto-corrects malformed URLs; the API receives the raw string β†’ do this: always encode parameter values explicitly β€” do not rely on browser correction

If you see β€œ%25 in URL (double-encoded percent)” β†’ it means you encoded an already-encoded string β†’ do this: decode first with decodeURIComponent, then re-encode the raw value

Common Fixes

Using encodeURI vs encodeURIComponent

❌ Wrong

// encodeURI does NOT encode & = ? β€” breaks query strings
const url = encodeURI("https://api.com/search?q=hello world&filter=a&b");
// β†’ https://api.com/search?q=hello%20world&filter=a&b  (& not encoded)

βœ… Fixed

// Encode only the value, not the entire URL
const q = encodeURIComponent("hello world&filter=a");
const url = `https://api.com/search?q=${q}`;
// β†’ https://api.com/search?q=hello%20world%26filter%3Da

encodeURI skips characters that are valid in a URL structure. Use encodeURIComponent for values only.

Non-ASCII characters (Γ©, ΓΌ, δΈ­)

❌ Wrong

// Raw non-ASCII in URL β€” may fail on some servers
fetch("https://api.com/search?q=cafΓ©");
// β†’ may be rejected or misinterpreted

βœ… Fixed

// Encode to percent-encoded UTF-8 bytes
const q = encodeURIComponent("cafΓ©");
fetch(`https://api.com/search?q=${q}`);
// β†’ https://api.com/search?q=caf%C3%A9

Non-ASCII characters must be percent-encoded as UTF-8 bytes. encodeURIComponent handles this automatically.

Special Characters Quick Reference

space%20use %20 (not + outside form data)
&%26query param delimiter β€” must encode in values
=%3Dkey/value separator β€” encode in values
+%2Bliteral plus β€” encode if not meaning a space
#%23fragment delimiter β€” encode in query values
/%2Fpath delimiter β€” encode in query values
?%3Fquery start β€” encode in query values

Encode and Decode URLs Instantly

Paste any URL or string to encode or decode it in the browser β€” see exactly what each special character becomes after encoding.

Open URL Encoder/Decoder β†’

Related Guides

Frequently Asked Questions

What is the difference between encodeURI and encodeURIComponent?

encodeURI encodes a full URL and leaves characters like /, ?, &, = untouched. encodeURIComponent encodes everything except letters, digits, and - _ . ~ β€” use it for query parameter values.

Should I use %20 or + for spaces in URLs?

Use %20 in path segments and encodeURIComponent output. The + sign for spaces only works in application/x-www-form-urlencoded bodies and is not safe in path or query string contexts.

How do I avoid double-encoding?

Only encode values that are not already encoded. If the value may already be encoded, decode it with decodeURIComponent first, then re-encode the plain value.

All tools run in your browser. Your data never leaves your device.