URL Encoding vs. Decoding: JavaScript encodeURI vs encodeURIComponent

encodeURI vs. encodeURIComponent

JavaScript provides two distinct encoding functions with different scopes:

encodeURI(): Intended for complete URLs. It preserves structural delimiters like http://, /, ?, and &.
encodeURIComponent(): Intended for individual query parameter values. It encodes all delimiters (e.g. & becomes %26, / becomes %2F) so parameter values do not corrupt URL parsing.

Code Example: Proper Parameter Encoding

const baseUrl = "https://api.toolnest.dev/search";
const query = "developer tools & utilities / 2026";

// INCORRECT (breaks query delimiter):
const badUrl = `${baseUrl}?q=${query}`;

// CORRECT:
const goodUrl = `${baseUrl}?q=${encodeURIComponent(query)}`;
// Output: https://api.toolnest.dev/search?q=developer%20tools%20%26%20utilities%20%2F%202026

Try Related Tools on ToolNest

🔗

URL Encoder

Encode URLs and query string parameters using standard percent-encoding (RFC 3986). Safely encode spaces, ampersands, slashes, and international characters.

🔓

URL Decoder

Decode percent-encoded URL strings and query parameters back into human-readable text. Converts %20, %26, %3F, and UTF-8 hex sequences back into characters.

🌐

URL & Query String Parser

Parse and break down URLs into protocol, hostname, port, path, query parameters, and hash fragments. Inspect and debug URL query string keys and values.

Related Technical Guides

Web Standards

What Is URL Encoding? Percent-Encoding & RFC 3986 Explained

Learn what URL encoding (percent-encoding) is, why URLs require character escaping, reserved vs unreserved characters, and how query strings are safely transmitted.

Web Standards

Understanding URL Query Parameters: Structure, Parsing & Security

Deep dive into URL query strings. Learn parameter syntax, array handling, URLSearchParams API in JavaScript, and security practices against open redirects.