URL Encoding Explained: When to Use encodeURI vs encodeURIComponent

Quick Answer

Quick Answer: Use encodeURIComponent for query parameter values and encodeURI for full URLs that already have structure. Test strings in our URL Encoder before shipping forms and API clients.

What URL encoding does

Reserved characters (&, =, ?, #, spaces) break URL parsing. Percent-encoding replaces them with %XX byte sequences (UTF-8 for Unicode).

encodeURI vs encodeURIComponent

const q = "hello world";
encodeURIComponent(q); // "hello%20world" — safe for ?q=
encodeURI("https://example.com/a b"); // encodes path spaces only

Common bugs

• Encoding an already-encoded string (hello%20world → double encoding)
• Using + for spaces in paths (legacy query style, not path-safe)
• Forgetting to encode JSON stuffed into query params

Compare with Unicode Escape and Base64 when payloads move between systems.

Frequently Asked Questions

Should I encode the entire URL?

Usually only components (path segments, query values). Over-encoding :// breaks the URL.

How are Unicode characters encoded?

UTF-8 bytes are percent-encoded, e.g. 世界 → %E4%B8%96%E7%95%8C.

Is URL encoding the same as Base64?

No. Base64 is for arbitrary binary/text transport; URL encoding keeps URLs parseable.