URL Encoder & Decoder

Encode and decode URLs online. Convert special characters to URL-safe format with percent-encoding.

Input 0 characters
Output 0 characters
Privacy Guaranteed: All conversions are executed locally in your browser's JavaScript environment. No data is ever transmitted to any server. Safe even for sensitive tokens or internal URLs.
Quick Test Common Characters

Click characters below to see their encoded form:

Space & ? = / @ ?

What is URL Encoding (Percent Encoding)?

URL encoding (also known as percent-encoding) replaces unsafe or special ASCII characters with a "%" followed by two hexadecimal digits. It ensures URLs remain valid and unambiguous when transmitted over the Internet. According to RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax, only a subset of characters (alphanumerics, hyphen, underscore, period, tilde) are considered "unreserved" and can be used without encoding. All other characters—including spaces, punctuation, and non-ASCII bytes—must be percent-encoded.

Why is URL Encoding Necessary?
URLs have a strict syntax: characters like ?, &, =, #, and spaces break query string or path segment parsing. Encoding transforms these characters into a safe format. For example, a space becomes %20 (or + in form data), and / becomes %2F when used inside a query parameter value. Without encoding, web servers may misinterpret the request, leading to broken links or security vulnerabilities.

How This Tool Works

This encoder uses the modern JavaScript encodeURIComponent() function, strictly adhering to RFC 3986. It encodes all characters except: A-Z a-z 0-9 - _ . ! ~ * ' ( ). The decoder uses decodeURIComponent() to revert percent-encoded sequences back to their original characters. This tool is designed for developers, QA engineers, security analysts, and anyone who needs to manipulate URL parameters safely.

Common Use Cases
  • ? Building query strings with special characters (e.g., ?search=John%20Doe&city=New%20York)
  • ? Encoding API request payloads in application/x-www-form-urlencoded format
  • ? Debugging malformed URLs or tracking parameters
  • ? Preparing redirect URLs containing user input
  • ? Obfuscating data in URL shorteners (safe transmission)
  • ? Handling file names or paths containing non-ASCII characters (Chinese, emojis)
Security Guidelines & Best Practices
  • Never blindly trust decoded data—always validate and sanitize server-side.
  • ✅ Use encodeURIComponent for parameter values, not entire URLs. Use encodeURI() for complete URLs.
  • ✅ Double encoding (e.g., encoding %20 to %2520) can cause unexpected results—avoid encoding already encoded strings.
  • ✅ Spaces are encoded as %20 (RFC standard) in this tool, not as + (form-data variant).
  • ✅ Always decode received parameters before processing to prevent injection attacks.

Character Encoding Reference Table (RFC 3986)

Character Encoded Form Description & Context
space %20 Space (RFC standard; becomes + in application/x-www-form-urlencoded)
! %21 Exclamation mark (unreserved in RFC 3986, but often encoded)
" %22 Double quote (unsafe in many contexts)
# %23 Hash / fragment identifier delimiter
$ %24 Dollar sign
% %25 Percent sign (reserved as the encoding indicator itself)
& %26 Ampersand (query parameter separator)
' %27 Apostrophe / single quote
( %28 Left parenthesis
) %29 Right parenthesis
* %2A Asterisk (unreserved in RFC 3986)
+ %2B Plus sign (often represents space in query strings)
, %2C Comma
/ %2F Forward slash (path delimiter; must be encoded in query strings)
: %3A Colon (scheme and host delimiter)
; %3B Semicolon
= %3D Equals sign (key-value assignment in queries)
? %3F Question mark (query string delimiter)
@ %40 At symbol (userinfo delimiter)
[ %5B Left square bracket
] %5D Right square bracket

Developer Guide: Advanced Encoding Concepts

encodeURI vs. encodeURIComponent: Critical Differences

Understanding the distinction between these two JavaScript functions is crucial for proper URL handling:

  • encodeURI(): Designed for encoding complete URIs. It does not encode characters that have semantic meaning in a URI structure: ;/?:@&=+$,#. Use this when you have a full, valid URL that you need to make safe for transmission, but you want to preserve its structure.
  • encodeURIComponent(): Designed for encoding URI components (like query parameter values). It encodes all characters except: A-Z a-z 0-9 - _ . ! ~ * ' ( ). This is the correct function for encoding values that will be placed inside a query string (?key=VALUE). This tool uses encodeURIComponent.

Example: Encoding [email protected] for use as an email parameter:

Handling Non-ASCII & Unicode Characters (UTF-8)

When encoding non-ASCII characters (e.g., Chinese, emojis, accented letters), the process involves two steps:

  1. The character is first converted to its UTF-8 byte sequence.
  2. Each byte of that sequence is then percent-encoded.

Example: Encoding the euro symbol "€":

  • UTF-8 bytes for "€": 0xE2 0x82 0xAC
  • Percent-encoded result: %E2%82%AC

This tool, via encodeURIComponent(), handles this process automatically. The decoder reverses it correctly.

Case Study: OAuth 2.0 & API Security

In OAuth 2.0 authorization flows, the redirect_uri parameter must be URL-encoded to preserve its integrity. Consider a redirect URI: https://app.com/callback?code=abc123&state=xyz. When this is passed as a query parameter value itself, it must be encoded to prevent the ? and & from breaking the outer query string structure.

Unencoded (Problematic):
redirect_uri=https://app.com/callback?code=abc123&state=xyz (The server sees redirect_uri=https://app.com/callback?code=abc123 and an extra parameter state=xyz)

Correctly Encoded:
redirect_uri=https%3A%2F%2Fapp.com%2Fcallback%3Fcode%3Dabc123%26state%3Dxyz

Improper encoding in such security-sensitive contexts is a common source of vulnerabilities like open redirects and parameter pollution. Using a reliable, standards-compliant encoder is essential for robust API security.

Troubleshooting & Common Pitfalls

This usually happens when encoding is applied at the wrong level or to the wrong part of the URL.

  • Problem: Encoding the entire URL with encodeURIComponent. This will incorrectly encode the ://, ?, and & that define the URL's structure.
  • Solution: Only encode the individual values of query parameters. Build your URL step-by-step:
    let url = "https://api.com/search?q=" + encodeURIComponent(userQuery) + "&sort=" + encodeURIComponent(sortBy);
  • Also check: Ensure you're not double-encoding. If your data source (e.g., a database, another API) already provides percent-encoded strings, do not encode them again.

This error indicates the input string is not valid percent-encoding. Common causes:

  • Incomplete % sequence: %2 or % at the end of the string. Each % must be followed by exactly two hex digits (0-9, A-F, a-f).
  • Invalid hex digits: %2G (G is not a hex digit).
  • Mixed + and %20 for spaces: The + character is only decoded to a space in the context of application/x-www-form-urlencoded. Our pure RFC 3986 decoder treats + as a literal plus. If you have a string with + representing spaces (e.g., from form data), you may need to replace + with %20 before decoding, or use a specialized form-data parser.
  • Solution: Verify your encoded string is complete and correctly formatted. Use this tool's encoder to see the correct format for comparison.

Frequently Asked Questions

encodeURI() assumes the input is a complete URI, so it does not encode characters like /?#[]@. encodeURIComponent() encodes those as well, making it suitable for query parameters. This tool uses the component version to avoid breaking parameter boundaries. See the "Developer Guide" section above for a detailed explanation and examples.

The application/x-www-form-urlencoded format used in HTML forms and some legacy systems encodes spaces as +. However, the generic URI percent-encoding standard (RFC 3986) uses %20. This tool follows RFC 3986 and outputs %20 for spaces. When decoding data from form submissions, you may need to handle + as spaces before using a standard percent decoder.

Absolutely. JavaScript's encodeURIComponent converts Unicode characters to their UTF-8 byte sequences and then percent-encodes each byte. For example, '?' becomes %F0%9F%98%80. Decoding returns the original emoji. See the "Handling Non-ASCII & Unicode Characters" section for details.

No. All processing happens locally in your browser using pure JavaScript. No information is transmitted over the network, making it safe for sensitive tokens, internal URLs, or any confidential data.

Double encoding means percent signs themselves are encoded (e.g., %20 becomes %2520 because % is %25). Our decode function will revert a single layer. You can click "Decode" multiple times. However, repeatedly decoding a string that is not actually double-encoded will corrupt legitimate percent signs. Use with caution and understand the source of your data.
References & Further Reading
RFC 3986 – Uniform Resource Identifier (URI): Generic Syntax | MDN Web Docs: encodeURIComponent() | W3C: application/x-www-form-urlencoded.
Content validated by the GetZenQuery Tech team. Last updated: March 2026.