0 lines
1
0 lines
1

For a deeper dive into double encoding, %20 vs +, and multilingual URL handling, see the URL Encoding Rules & Pitfalls Guide.

Practical Example

Encode search terms, callback URLs, or multilingual paths before putting them into query parameters. You can also decode values from server logs to confirm what the browser actually sent.

What is URL Encoding?

URL encoding (percent-encoding) converts characters that are unsafe or have special meaning in URLs into %XX format, where XX is the hexadecimal byte value. Standardized in RFC 3986, it ensures browsers, servers, and API clients can correctly parse URLs regardless of special characters in data values.

For example, a space becomes %20, and Korean character "가" (3 bytes in UTF-8) becomes %EA%B0%80. URL structural characters like ://, /, ?, &, and = each have reserved roles, so they must be encoded when they appear as data values rather than structural delimiters.

encodeURI() vs encodeURIComponent()

encodeURI() encodes a complete URL, preserving structural characters (:, /, ?, #, &, =). Use it when you have a full URL with non-ASCII characters that need encoding.

encodeURIComponent() encodes individual URL components (query parameter values, path segments), converting nearly all special characters including structural ones. This is the correct choice for encoding parameter values before assembling a URL.

Using encodeURIComponent() on an entire URL would break it by encoding :// and /. Conversely, using encodeURI() on a parameter value with & or = would break URL parsing. This tool uses encodeURIComponent() behavior.

Common Pitfalls

Double Encoding — If you encode an already-encoded URL, % itself becomes %25. For example, %20 becomes %2520, which the server cannot decode correctly. HTTP clients like axios and fetch auto-encode query parameters, so passing pre-encoded values causes double encoding. Check the Network tab for %25 to diagnose this issue.

Space: %20 vs + — In URL paths, %20 is standard (RFC 3986). In HTML form data (application/x-www-form-urlencoded), + represents a space. JavaScript's encodeURIComponent() uses %20; URLSearchParams uses +. Choose based on your server's expected format.

Reserved Character Leaks — If a query parameter value contains &, =, or # and is not encoded, URL parsing breaks. For example, ?q=A&B is parsed as q=A and separate parameter B instead of q=A&B. It should be ?q=A%26B.

Multilingual URLs

Non-ASCII characters like Korean, Japanese, and Chinese are encoded as multi-byte UTF-8 sequences. A single Korean character uses 3 bytes, producing sequences like %EA%B0%80. Browsers display the decoded form in the address bar, but HTTP requests always transmit the encoded form. If you see these sequences in server logs, they are normal UTF-8 percent-encoding.

encodeURI vs encodeURIComponent — the Practical Rule

AspectencodeURIencodeURIComponent
PreservesURL structure chars: / ? & = # :Only alphanumerics and - _ . ! ~ * ' ( )
PurposeEncoding a complete URLEncoding a single parameter value
Misuse symptomAn & inside a value survives and splits your parametersApplied to a full URL, it mangles ://

One rule covers it: Component for values, URI for whole URLs. User input going into a parameter value must go through encodeURIComponent, or inputs containing & or = will corrupt the query string.

Diagnosing Double Encoding

Patterns starting with %25 — like %2520 — are the signature of double encoding, because %25 is the encoding of % itself. It usually comes from proxies re-encoding already-encoded URLs, or code calling the encoder twice. Run decode twice in this tool: if the second pass produces the original text, double encoding is confirmed. Full rules are in the URL encoding guide.

FAQ

Is a space encoded as %20 or +?

In URL paths, %20 is standard per RFC 3986. In HTML form submissions (application/x-www-form-urlencoded), + is used. This tool uses %20 via encodeURIComponent().

Should I encode an entire URL?

No. Only encode individual component values (query parameters, path segments). Encoding the full URL converts :// and / to percent-encoded forms, breaking the URL structure.

What causes double encoding?

Encoding an already-encoded string. The % in %20 becomes %25, producing %2520. This commonly happens when frameworks auto-encode parameters and you manually encode as well.

Why do Korean characters produce long sequences?

Each Korean character is 3 bytes in UTF-8, so one character becomes three %XX pairs (9 characters). This is normal — browsers decode them automatically for display.

Is my input sent to a server?

No. All encoding and decoding runs entirely in your browser using JavaScript. No network requests are made.