When should I use encodeURIComponent vs encodeURI?

Use encodeURIComponent for individual query parameter values and any part of a URL that is a data value rather than a structural character. It encodes everything including /, ?, =, and &. Use encodeURI only for complete, already-structured URLs where you want to preserve the structural characters (colons, slashes, question marks, ampersands). The most common mistake is using encodeURI on a query value — it will leave = and & unencoded and break the query string.

What is double encoding and how do I avoid it?

Double encoding happens when you encode an already-encoded string a second time. The % in %20 becomes %25, turning %20 into %2520. Decode the string first to check if it is already encoded before encoding it again. In code, only encode values at the point where they are being inserted into a URL, not before.

Does this tool send data to a server?

No. Encoding and decoding happen entirely in your browser using JavaScript's built-in encodeURIComponent(), encodeURI(), and decodeURIComponent() functions. Nothing is transmitted to any server.

What is the difference between + and %20 for spaces?

Both represent a space, but in different contexts. %20 is the percent-encoded space and is correct in all URL contexts. The + sign represents a space only in application/x-www-form-urlencoded data (HTML form submissions) — not in path segments or general URL parameters. encodeURIComponent always produces %20, which is safe everywhere.

How do I encode a URL to pass it as a query parameter?

Use encodeURIComponent() on the full inner URL. This encodes the colons, slashes, question marks and ampersands in the inner URL so they are treated as data values rather than structural characters in the outer URL. Example: the redirect URL https://example.com/page?id=5 becomes https%3A%2F%2Fexample.com%2Fpage%3Fid%3D5 when used as a query value.

🔗

URL Encoder / Decoder

Encode or decode URL components for safe transmission. Free, instant, private.

💻 Developer Tools Free Browser-based

Tool

Input

Mode: Live mode

Result

What Is URL Encoding?

URL encoding (percent-encoding) replaces characters that are unsafe in a URL with a % sign followed by two hexadecimal digits. A space becomes %20, an ampersand becomes %26. This ensures URLs are transmitted correctly across the internet regardless of the browser or server.

encodeURI vs encodeURIComponent

Function	Keeps	Best For
`encodeURI`	`:/?#[]@!$&'()*+,;=`	Full URLs that already have valid structure
`encodeURIComponent`	Letters, digits, `-_.!~*'()`	Individual query parameter values

Common Characters and Their Encoded Forms

Character	Encoded	Character	Encoded
Space	`%20`	`&`	`%26`
`=`	`%3D`	`+`	`%2B`
`/`	`%2F`	`?`	`%3F`
`#`	`%23`	`@`	`%40`

Real-World Examples: When You Need URL Encoding

1. Building query strings with special characters

When a search query or form value contains &, =, or other special characters, they must be encoded to avoid breaking the URL structure:

// Unencoded — breaks the query string:
https://example.com/search?q=foo&bar=baz&sort=asc

// Correct — values encoded:
https://example.com/search?q=foo%26bar&sort=asc

2. Encoding UTM parameters

Google Analytics UTM parameters often contain slashes, spaces, and special characters that need encoding:

// UTM source with spaces — broken:
?utm_source=newsletter april 2026

// Correctly encoded:
?utm_source=newsletter%20april%202026

3. Passing a URL as a query parameter

When a URL is passed as the value of another URL's query parameter, the inner URL must be fully encoded:

// Unencoded — server cannot parse correctly:
?redirect=https://example.com/page?id=5&lang=en

// Correctly encoded with encodeURIComponent:
?redirect=https%3A%2F%2Fexample.com%2Fpage%3Fid%3D5%26lang%3Den

Double Encoding: A Common Pitfall

Double encoding happens when an already-encoded string is encoded again. A %20 (space) becomes %2520 (%25 is the encoding for the % sign, followed by "20"). This causes URLs to break or deliver unexpected values to the server.

Common causes:

Encoding a full URL (already encoded) with encodeURIComponent instead of encodeURI.
Encoding query parameters that were already encoded by a form or framework.
Server-side encoding on top of client-side encoding.

Use the Decode button in this tool to check if a string has already been encoded before encoding it again. If decoding produces clean text, it was already encoded.

URL Encoding for Non-ASCII Characters

Characters outside the ASCII range (accented characters like é, ü, ñ; CJK characters; Arabic; emoji) are first converted to their UTF-8 byte sequence, then each byte is percent-encoded:

"é" (e with acute) → UTF-8 bytes: 0xC3 0xA9 → encoded: %C3%A9
"中" (CJK character) → UTF-8 bytes: 0xE4 0xB8 0xAD → encoded: %E4%B8%AD
😀 (emoji) → UTF-8 bytes: 0xF0 0x9F 0x98 0x80 → encoded: %F0%9F%98%80

Modern browsers handle this automatically for URLs typed in the address bar, but when building URLs programmatically, always use encodeURIComponent() to ensure non-ASCII values are encoded correctly.