URL Encode/Decode with Query Parser

encodeURI encodes full URL, preserving URL structure characters (:, /, ?, &, #). Example: encodeURI("http://example.com/path?q=hello world") = "http://example.com/path?q=hello%20world". encodeURIComponent encodes URI parts, encodes ALL special characters including URL structure. Example: encodeURIComponent("hello world&foo=bar") = "hello%20world%26foo%3Dbar". Use encodeURI for: complete URLs before sending. Use encodeURIComponent for: query parameter values, form inputs, API parameters. Common mistake: using encodeURI on query values - breaks &, =. Best practice: encodeURIComponent for all user input in URLs. This tool supports both modes with visual difference comparison.

Reserved characters (special meaning): : / ? # [ ] @ ! $ & ( ) * + , ; = - must encode in data, not structure. Unsafe characters: space " < > % { } | \ ^ ~ [ ] ` - always encode. Non-ASCII: 中文, émojis, accents (é, ñ) - encode. Unreserved (safe, no encoding needed): A-Z a-z 0-9 - _ . ~. Example: "hello world!" → "hello%20world%21". Common encodings: space = %20 or +, @ = %40, # = %23, & = %26, = = %3D. Double encoding: avoid encoding twice (%20 → %2520). Decode before re-encoding. This tool highlights which characters require encoding and provides character encoding reference.

Query strings start with ? and use & to separate parameters. Format: ?key1=value1&key2=value2. Encode each value separately: ?search=encodeURIComponent(userInput). Example: search="coffee & tea" → ?search=coffee%20%26%20tea. Array parameters: ?tags[]=a&tags[]=b or ?tags=a,b (depends on server). Spaces: %20 or + (both valid in query strings). Equals in value: encode = as %3D. Ampersand in value: must encode & as %26 (otherwise starts new parameter). Build query: use URLSearchParams (JavaScript) or http.build_query (PHP). Never concatenate manually: "?search=" + input (unsafe!). This tool safely encodes query parameters with proper & and = handling.

Different contexts, different encoding. URL encoding: for URLs and URIs, uses %XX hexadecimal, space = %20, < = %3C. HTML encoding: for HTML content, uses &name; entities, space =   (non-breaking) or plain space, < = <. Example: "a<b&c>d" in URL: "a%3Cb%26c%3Ed", in HTML: "a<b&c>d". Context matters: URL parameter with HTML content needs both: encodeURIComponent("a") = "a%3Cb%3E", then in HTML: <a href="?q=a%3Cb%3E">. Don't mix: using %20 in HTML shows literally, using < in URL breaks. This tool focuses on URL encoding - use HTML encoder for HTML entities.

URL paths (between slashes): encode most special characters but / separates path segments. Example: /api/users/john%20doe (space encoded, / not). Some servers allow: - _ . ~ in paths unencoded. Query strings (after ?): encode = & ? # since they have special meaning. Example: ?name=john%26jane (& must be encoded). Fragment (after #): similar to query encoding. Best practices: always encode user input regardless of position, encodeURIComponent for both paths and queries is safe, server frameworks handle decoding automatically. Double slashes: avoid // in paths (may normalize to /). This tool helps identify correct encoding per URL component.

Double encoding: encoding already-encoded URL. "hello%20world" → "hello%2520world" (wrong). Check before encoding. Not encoding user input: ?search=user

Non-ASCII characters (中文, émoji, é) convert to UTF-8 bytes then percent-encode each byte. Example: "café" → c (63) a (61) f (66) é (C3 A9 in UTF-8) → "caf%C3%A9". Emoji "😀" → %F0%9F%98%80 (4 bytes). Modern browsers handle automatically, but APIs may need explicit encoding. Punycode for domains: "münchen.de" → "xn--mnchen-3ya.de" (different encoding). IDN (Internationalized Domain Names) handled separately from path/query encoding. Best practice: use UTF-8 everywhere, let libraries handle encoding (encodeURIComponent uses UTF-8), test with actual international characters. This tool correctly handles UTF-8 multibyte characters and shows byte-level encoding.