Url Help & Guide

Why URL Encoding?

URLs can only contain a limited set of characters (ASCII letters, digits, and some special chars). All other characters must be percent-encoded to be safely transmitted.

When to Encode

• Query parameters: Values after ?
• Path segments: Parts of the URL path
• Fragment identifiers: The part after #

Common Encodings

• Space → %20 or + (in query string)
• & → %26 (key=value separator)
• = → %3D (key=value separator)
• / → %2F (path separator)

Issue: Double Encoding

Symptom: Getting %2520 instead of %20.

Cause: Encoding already-encoded data.

Fix: Only encode once. Check if your framework encodes automatically.

Issue: + vs %20 in Query Strings

Cause: Confusion between HTML form encoding and URL encoding.

Solution: For query parameters, use encodeURIComponent() which produces %20. For form submission (application/x-www-form-urlencoded), spaces become +.

Issue: Broken Chinese Characters

Cause: Not encoding non-ASCII characters properly.

Fix: Always UTF-8 encode before percent-encoding. encodeURIComponent("中文") → %E4%B8%AD%E6%96%87

Choose the Right Function

• encodeURIComponent(): Encodes everything except ASCII letters, digits, - _ . ! ~ * ' ( )
• encodeURI(): Encodes everything except ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
• decodeURIComponent(): Decodes %XX sequences

Don't Encode These

• Scheme: http://, https://
• Domain: example.com
• Hyphen, underscore, period, tilde

Always Encode Query Values

Never put raw user input in URLs without encoding:

// Bad
fetch('/api/users?name=' + name);

// Good  
fetch('/api/users?name=' + encodeURIComponent(name));