What is the difference between encodeURI and encodeURIComponent in JavaScript?

encodeURI encodes a complete URL, leaving structural characters (/, :, ?, &, #, =) unencoded because they have special meaning in URLs. encodeURIComponent encodes a URL component value (like a query parameter value) and encodes ALL characters except letters, digits, and -_.!~*'(). Use encodeURIComponent for individual query parameter names and values.

Should spaces in URLs be %20 or +?

In URL path segments and RFC 3986 encoding, spaces are %20. In HTML form submissions (application/x-www-form-urlencoded), spaces become + in the query string. When building URLs programmatically, use %20 (encodeURIComponent) for full compatibility. The + convention is a legacy form-encoding quirk.

How do I encode a URL that contains another URL as a parameter?

The inner URL must be fully percent-encoded so its structural characters (:, /, ?, &, =, #) don't interfere with the outer URL's structure. Use encodeURIComponent() on the inner URL before appending it as a query parameter value to the outer URL.

URL Encode/Decode | DevStackTools

URL Encoder & Decoder — Percent-Encode and Decode URLs Online

Understanding the Basics

URLs (Uniform Resource Locators) can only contain a limited set of safe ASCII characters as defined by RFC 3986. Characters outside this allowed set — including spaces, non-ASCII Unicode characters, and many punctuation marks — must be percent-encoded: replaced by a percent sign (%) followed by the two-digit hexadecimal ASCII code of the character. A space becomes %20, an ampersand becomes %26, a hash becomes %23, and a Euro sign (€) becomes the three-byte UTF-8 sequence %E2%82%AC. This encoding is essential for correctly passing data in URL query strings: a search query for "C++ algorithms & data structures" must be encoded as C%2B%2B+algorithms+%26+data+structures before appending it to a URL. Without encoding, the browser and server would misinterpret the +, &, and # as URL structural characters rather than literal data characters. URL encoding is also known as percent-encoding; form encoding (application/x-www-form-urlencoded) is a slightly different variant where spaces become + instead of %20. Our tool supports both RFC 3986 percent-encoding and form-encoding, covering all common URL encoding needs from API development to link building.

How to Use the Tool

Select the mode: "Encode" (raw text → URL-safe) or "Decode" (encoded URL → original text).
Paste your content in the input field. The tool handles full Unicode by converting to UTF-8 bytes first.
Choose the encoding variant: RFC 3986 (spaces → %20) or Form encoding (spaces → +).
The encoded or decoded result appears instantly in the output panel.
Copy the result for use in API request URLs, HTML href attributes, or HTTP client code.

Key Features & Specifications

RFC 3986 percent-encoding: converts all reserved and non-ASCII characters to %XX sequences
Form-encoding (application/x-www-form-urlencoded): spaces become + instead of %20
Handles full Unicode text by UTF-8 encoding before percent-encoding
Encodes component mode (for query parameter values) vs full URL mode (preserves /, :, ?, &)
Decodes both %20 and + as spaces for maximum compatibility with different encoders

Frequently Asked Questions (FAQ)

Q:What is the difference between encodeURI and encodeURIComponent in JavaScript?: encodeURI encodes a complete URL, leaving structural characters (/, :, ?, &, #, =) unencoded because they have special meaning in URLs. encodeURIComponent encodes a URL component value (like a query parameter value) and encodes ALL characters except letters, digits, and -_.!~*'(). Use encodeURIComponent for individual query parameter names and values.
Q:Should spaces in URLs be %20 or +?: In URL path segments and RFC 3986 encoding, spaces are %20. In HTML form submissions (application/x-www-form-urlencoded), spaces become + in the query string. When building URLs programmatically, use %20 (encodeURIComponent) for full compatibility. The + convention is a legacy form-encoding quirk.
Q:How do I encode a URL that contains another URL as a parameter?: The inner URL must be fully percent-encoded so its structural characters (:, /, ?, &, =, #) don't interfere with the outer URL's structure. Use encodeURIComponent() on the inner URL before appending it as a query parameter value to the outer URL.