URL Encode/Decode Tutorial
Detailed guide, best practices, and FAQ
Use Cases
The URL encoder/decoder is useful for building query strings, handling URLs with special characters, debugging API requests, and generating safe links. Use it to put Chinese, spaces, &, and other special characters into URLs, or to parse encoded URLs back.
Features
- Bidirectional: encode and decode with one toggle
- encodeURIComponent: encodes all URL-unsafe characters
- encodeURI: preserves URL structure characters (:/?&=)
- Real-time output: converts as you type
- Chinese support: correctly handles UTF-8 Chinese characters
Examples
Example 1: Scenario 1: API request parameters contain Chinese, e.g., `?name=张三&city=北京` must be encoded as `?name=%E5%BC%A0%E4%B8%89&city=%E5%8C%97%E4%BA%AC` for transmission.
Example 2: Scenario 2: Build a share link where the title contains special characters that must be encoded before being appended to the URL.
Example 3: Scenario 3: Debug an encoded URL in backend logs by pasting it into the tool and decoding it back to readable Chinese.
Best Practices
- Use encodeURIComponent for query parameter values, encodeURI for entire URLs
- Never manually concatenate URL parameters — use a tool or library to encode automatically
- Ensure the string is valid encoded format before decoding to avoid double-decoding
- Keep URLs under 2000 characters for browser compatibility
FAQ
What is the difference between encodeURIComponent and encodeURI?
encodeURIComponent encodes all non-alphanumeric characters (including :/?&=), suitable for individual parameter values. encodeURI preserves URL structure characters and is suitable for complete URLs.
Why is space encoded as %20 or +?
In URL query strings, spaces are typically represented as + (application/x-www-form-urlencoded). In URL paths, spaces should be %20. This tool uses %20.
Can it decode a string that has been encoded multiple times?
Yes, but you need to click "Decode" multiple times. Each click peels off one layer of encoding until the string stops changing.