hidekazu-konishi.com

URL Encoder Decoder Tool - Multi-Mode URL Encoding and Decoding with URL Parser

First Published: 2026-04-01
Last Updated: 2026-04-01

Features:

• Multiple Encoding Modes: Choose from encodeURIComponent (most common for query parameters), encodeURI (preserves URI structure), RFC 3986 strict (encodes additional characters like ! ' ( ) *), and Form encoding (application/x-www-form-urlencoded with + for spaces).
• Encoding Comparison: See how the same input text is encoded differently by each mode in a side-by-side comparison table with highlighted percent-encoded characters.
• Character Breakdown: View a per-character analysis showing Unicode code points, UTF-8 byte values, and encoding results across all four modes.
• URL Parser: Decompose any URL into its components (protocol, host, path, query parameters, fragment) with both raw and decoded values.
• Double-Encoding Detection: Automatically warns if your input appears to already contain percent-encoded characters, helping you avoid the common double-encoding mistake.
• Real-Time Encoding: Enable live encoding that updates as you type for instant feedback.
• Bulk Mode: Process multiple values at once with line-by-line encoding or decoding.
• Swap Input/Output: Quickly swap encoded and decoded text for iterative encoding/decoding workflows.
• Full Unicode Support: Correctly handles multi-byte characters including CJK, emoji, and other non-ASCII text via UTF-8 encoding.
• 100% Client-Side: All processing happens in your browser. No data is transmitted to any server.
• Works Offline: Once loaded, the tool works without an internet connection.

How to Use:

1. Encode Text: Enter text in the left "Plain / Decoded Text" area, select an encoding mode, and click "Encode →".
2. Decode Text: Enter percent-encoded text in the left area and click "← Decode" to get the original text in the right area.
3. Choose Encoding Mode: Use the dropdown to select the appropriate mode for your use case — encodeURIComponent for query parameter values, encodeURI for full URIs, RFC 3986 for strict compliance, or Form encoding for HTML form submissions.
4. Compare Modes: Go to the "Compare Modes" tab, enter text, and see how each encoding mode handles it differently with per-character analysis.
5. Parse URLs: Go to the "URL Parser" tab, enter a complete URL, and click "Parse URL" to see all components broken down with decoded values.
6. Real-Time Mode: Check "Real-time encoding" to see encoded output update as you type.
7. Bulk Processing: Check "Bulk mode" to encode or decode multiple lines at once, each line processed independently.

Important Notes:

• encodeURIComponent is the most commonly used mode for encoding individual query parameter values. It encodes all characters except A-Z a-z 0-9 - _ . ! ~ * ' ( ).
• encodeURI is designed for encoding a full URI while preserving its structure (scheme, host, path delimiters). It does NOT encode : / ? # [ ] @ ! $ & ' ( ) * + , ; =.
• RFC 3986 mode provides the strictest encoding by also encoding ! ' ( ) * which encodeURIComponent leaves unencoded.
• Form encoding (application/x-www-form-urlencoded) converts spaces to + instead of %20, matching how HTML forms submit data.
• Multi-byte Unicode characters (e.g., Japanese, Chinese, emoji) are first converted to UTF-8 bytes, then each byte is percent-encoded (e.g., %E4%B8%96).
• A common mistake is double-encoding — encoding text that is already encoded. This tool detects and warns about this scenario.

References:
Tech Blog with curated related content
Web Tools Collection