URL Encoder / Decoder

What is URL Encoding?

URL encoding, also known as percent encoding, is a mechanism for encoding special characters in a URL into a format that can be safely transmitted over the internet. The process converts each non-ASCII or reserved character into a percent sign (%) followed by two hexadecimal digits that represent the character's byte value. For example, a space becomes %20, an ampersand becomes %26, and an equals sign becomes %3D.

URL encoding is necessary because URLs are designed to use a limited subset of the ASCII character set. The allowed unreserved characters are uppercase and lowercase letters (A-Z, a-z), digits (0-9), hyphens (-), underscores (_), periods (.), and tildes (~). Every other character — including spaces, punctuation marks, non-Latin scripts, and emoji — must be encoded before being included in a URL. This ensures that the URL is interpreted correctly by web browsers, servers, and proxies.

In JavaScript, URL encoding is performed using encodeURIComponent(), which encodes all characters except A-Z, a-z, 0-9, -, _, ., !, ~, *, ', and (. For encoding entire URLs where you want to preserve structural characters like slashes and colons, encodeURI() is used instead. This tool uses encodeURIComponent() and its counterpart decodeURIComponent() for precise control over the encoding process.

How Does URL Encoding Work?

URL encoding follows a straightforward algorithm defined in RFC 3986:

1. Character Classification: Each character in the input string is checked against the set of unreserved characters (A-Z, a-z, 0-9, -, _, ., ~). Unreserved characters are left as-is.
2. UTF-8 Byte Conversion: For characters that need encoding (everything not in the unreserved set), the character is first converted to its UTF-8 byte representation. ASCII characters use 1 byte, while Unicode characters like accented letters, CJK scripts, and emoji use 2 to 4 bytes.
3. Percent Encoding: Each byte is converted to its two-digit hexadecimal representation and prefixed with a percent sign. For example, the space character (byte value 0x20) becomes %20, the é character (UTF-8 bytes 0xC3, 0xA9) becomes %C3%A9.
4. Assembly: The encoded sequences are assembled into the final output string, with unreserved characters passed through unchanged. The result is a URL-safe string that contains only ASCII characters.
5. Decoding Reverses the Process: When decoding, the algorithm scans for percent signs, reads the following two hex digits, converts them back to a byte, collects sequences of bytes, and interprets them as UTF-8 to reconstruct the original string.

It is important to understand the difference between encodeURI() and encodeURIComponent(). The former does not encode URL structural characters like :/?#[]@!$&'()*+,;=, making it suitable for encoding full URLs. The latter encodes all of these characters plus additional ones, making it suitable for encoding individual query parameter values. This tool uses encodeURIComponent() for maximum precision.

When to Use URL Encoding

How to Use This URL Encoder / Decoder

1. Select the Mode: Choose "Encode" to convert plain text to percent-encoded format, or "Decode" to convert a percent-encoded string back to plain text. The mode toggle is at the top of the input panel.
2. Enter Your Text: Type or paste your text into the input textarea. In encode mode, enter any text including URLs, query strings, or text with special characters. In decode mode, paste a percent-encoded string like Hello%20World%21.
3. Real-Time Conversion: The output updates instantly as you type — there is no need to click a convert button. The encoding or decoding happens character by character in real time.
4. Review the Output: Check the result panel to see the converted output. Switch between "Result" view (styled preview) and "Raw" view (plain text) using the tabs.
5. Check Validation: The status checklist monitors your input and output in real time. In decode mode, it validates that the percent-encoded sequences are properly formatted and flags any decoding errors.
6. Copy the Output: Click the "Copy" button to copy the output to your clipboard. You can also copy from the raw view using the inline copy button.
7. Try Examples: Click the quick example buttons to load sample inputs — "Query String" for parameter encoding, "Spaces & Symbols" for common special characters, "Unicode Text" for multibyte encoding, and "Full URL" for a complete URL example.
8. Clear and Start Over: Click "Clear All" to reset both the input and output fields and return to the default state.

Practical Use Cases

• Building API Query Strings: When constructing URLs for REST API requests, each parameter value must be URL-encoded. For example, a search for "chocolate & vanilla" becomes q=chocolate%20%26%20vanilla. This ensures the ampersand is treated as data, not as a parameter separator.
• Form Submission URLs: When submitting form data via GET requests, the form values must be URL-encoded. Names with apostrophes, spaces, or special characters will break the URL if not properly encoded.
• Social Media Sharing URLs: Sharing URLs on platforms like Twitter and Facebook require URL-encoded parameters. The text, URL, and hashtags in share links must all be properly encoded to function correctly.
• Redirect URLs in OAuth: OAuth authentication flows use redirect_uri parameters that must be URL-encoded. A redirect URL like https://example.com/callback?token=abc must have its query parameters double-encoded.
• Email Newsletter Links: Links in HTML emails often contain tracking parameters with special characters. URL-encoding ensures these links work correctly across all email clients without breaking.
• Debugging Server Logs: Web server access logs show URL-encoded request paths and query strings. Decoding these entries reveals the actual user input, helping with debugging and security analysis.
• Configuring Web Servers: Rewrite rules in Apache, Nginx, or IIS often need to match or manipulate URL-encoded patterns. Understanding the encoded format helps write correct regex patterns and rewrite conditions.

Frequently Asked Questions