encodeURI vs encodeURIComponent: The Critical Differences in JavaScript
Understand when to use encodeURI vs encodeURIComponent in JavaScript. Learn why using encodeURI on query parameters causes broken server requests.
encodeURI() is designed to encode a complete URI, preserving protocol and path delimiters like :, /, ?, #, and &. encodeURIComponent() is designed to encode an individual query parameter value, escaping every reserved character—including ?, &, and /—into percent-encoded representations (%3F, %26, %2F) so they don't break URL parsing.
Solve this problem now with our free URL Encoder / Decoder
Try it instantly in your browser — zero tracking, 100% client-side privacy.
Specification & Architecture Reference
| Character | encodeURI() Result | encodeURIComponent() Result | Role in URI Parsing |
|---|---|---|---|
| / (Slash) | Preserved as '/' | Encoded as %2F | |
| ? (Question mark) | Preserved as '?' | Encoded as %3F | |
| & (Ampersand) | Preserved as '&' | Encoded as %26 | |
| = (Equals sign) | Preserved as '=' | Encoded as %3D | |
| # (Hash) | Preserved as '#' | Encoded as %23 |
The Primary Source of Broken Query Strings
One of the most frequent frontend bugs occurs when a developer uses `encodeURI()` instead of `encodeURIComponent()` to sanitize search query parameters:
// ❌ WRONG: Uses encodeURI on a parameter const badUrl = "https://example.com/search?q=" + encodeURI(query); // Output: "https://example.com/search?q=shoes & socks / boots" ``` Because `encodeURI()` assumes the input is a complete URL, it preserves the ampersand (`&`). The receiving server parses this as two separate parameters: 1. `q` = `"shoes "` 2. ` socks / boots` = `undefined`
The query is truncated and the search produces zero results.
The Correct Function: `encodeURIComponent()` When encoding an individual parameter value, use `encodeURIComponent()`:
// ✅ CORRECT: Escapes parameter delimiters
const goodUrl = "https://example.com/search?q=" + encodeURIComponent(query);
// Output: "https://example.com/search?q=shoes%20%26%20socks%20%2F%20boots"
```Summary Rule - **Use `encodeURI()`** when you have a full URL (e.g., `https://site.com/path with spaces`) and only need to encode illegal characters like spaces. - **Use `encodeURIComponent()`** on every individual parameter value before appending it to the query string.
Encode, decode, and verify complex URLs safely with Mickytool's **URL Encoder / Decoder**.
Solve this problem now with our free URL Encoder / Decoder
Execute this workflow immediately without saving data on remote servers.
Frequently Asked Questions
Does encodeURIComponent encode single quotes or exclamation marks?
No. encodeURIComponent() does not encode ! ~ * ' ( ). If your API requires full RFC 3986 compliance, replace these characters manually with their percent hex codes.
What is the modern alternative to manual URL string concatenation?
Use the modern URL and URLSearchParams APIs (new URLSearchParams({ q: query }).toString()), which automatically encode query parameters correctly.