URL Encoder/Decoder
Complete URL Encoding Guide
1. What is URL Encoding?
URL encoding (percent encoding) is the process of converting unsafe characters in URLs to % followed by hexadecimal codes. Since URLs only allow ASCII characters, Korean, special characters, and spaces need encoding. For example, space becomes %20, @ becomes %40, and Korean "안녕" becomes %EC%95%88%EB%85%95. Defined in RFC 3986 standard, characters other than A-Z, a-z, 0-9, -, _, ., ~ must be encoded. Different parts of URLs (query parameters, paths, hashes) have different encoding rules.
2. Why Encode Special Characters
Special characters in URLs have special meanings, so they must be encoded to use as values. For example, & is a parameter separator, so to include & in a value, encode it as %26. = is a key-value separator, ? starts queries, # starts fragments. Spaces are encoded as + or %20. Without encoding Korean or special characters, servers may fail to parse correctly or return 404 errors. Always encode when including search terms or user input in URLs.
3. Query Parameter Encoding
Query parameters are the most frequently encoded part of URLs. Example: https://example.com/search?q=search&category=IT. Both "search" and "IT" should be encoded. Using JavaScript's encodeURIComponent() encodes =, &, ? making it safe for query parameter values. encodeURI() is for encoding entire URLs but doesn't encode =, &, ?, making it unsuitable for query values. Always individually encode keys and values with encodeURIComponent().
4. encodeURI vs encodeURIComponent
JavaScript has two URL encoding functions. encodeURI() encodes entire URLs and doesn't encode URL structure characters like :, /, ?, &, =. Use for complete URLs. encodeURIComponent() encodes URL components (parameter values, etc.) and encodes all structure characters. Use for individual components like query parameters and path segments. In most cases, using encodeURIComponent() is safer. Decode with decodeURI() and decodeURIComponent() respectively.
5. Internationalized Domain Names (IDN)
Domain names in Korean or other languages (e.g., 한국.com) are converted to Punycode. Punycode represents Unicode domains in ASCII using the xn-- prefix. Example: "한국.com" becomes "xn--3e0b707e.com". Browsers automatically perform this conversion, but when handling directly in code, a Punycode library is needed. Note that URL paths and queries use regular percent encoding, while domains use Punycode.
6. URL Encoding Best Practices
Important considerations for URL encoding: Always encode user input to prevent XSS attacks. Be careful not to double-encode already encoded URLs. When constructing URLs, encode each part individually then combine. HTTP clients like fetch() and axios often automatically encode, so avoid duplication. Servers usually support automatic decoding, so explicit decoding is mostly unnecessary. When logging or debugging URLs, viewing the decoded form is easier to read.