raatools/

URL Encoder / Decoder

Encode or decode URLs and query strings.

What is URL encoding?

URL encoding (also called percent-encoding) is the mechanism for converting characters that are not allowed in a URL into a safe hexadecimal format. Each unsafe character is replaced with a percent sign followed by two hex digits representing its ASCII code. For example, a space becomes %20, an ampersand becomes %26, and a hash becomes %23.

URLs can only contain a limited set of characters defined by RFC 3986: letters (Aโ€“Z, aโ€“z), digits (0โ€“9), and a few special characters (- _ . ~ ! * ' ( )). Every other character โ€” including spaces, non-ASCII letters, and reserved characters like & = ? # โ€” must be percent-encoded before being included in a URL.

When do you need to encode a URL?

  • Passing special characters in query string parameters (e.g., ?q=hello%20world).
  • Encoding form data sent via HTTP POST with application/x-www-form-urlencoded content type.
  • Constructing API request URLs programmatically with user-provided input.
  • Embedding URLs inside other URLs (e.g., redirect parameters).
  • Including Unicode characters (accented letters, emoji, CJK characters) in URLs.

Encode vs. decode

Encoding converts plain text to a URL-safe string by replacing unsafe characters with percent-encoded equivalents. Decoding reverses this process, converting percent-encoded sequences back to their original characters. This tool lets you switch between encoding and decoding directions with a single click.

How to use this tool

Paste or type text in the input field. Select encode or decode mode. The output updates instantly. Click the swap button to reverse the direction using the current output as the new input. This is useful when you need to encode a string and then verify the result by decoding it back.

Characters that are encoded

This tool uses JavaScript's encodeURIComponent() function, which encodes all characters except: Aโ€“Z, aโ€“z, 0โ€“9, and the unreserved characters - _ . ! ~ * ' ( ). This is the correct encoding for query parameter values and form data. The similar encodeURI() function is less aggressive and preserves characters like : / ? # that have meaning in URL structure.

Common URL encoding mistakes

The most common mistake is double-encoding โ€” encoding a string that is already encoded, turning %20 into %2520. This breaks URLs and confuses servers. Always check whether your input is already encoded before applying encoding. Another error is using encodeURI() when encodeURIComponent() is needed, which leaves & and = unencoded in parameter values.

Not encoding user input before inserting it into URLs is a security vulnerability. Unencoded user input can inject extra query parameters, break URL parsing, or enable injection attacks. Always encode user-provided values when constructing URLs programmatically.

Practical tips

In web development, most frameworks handle URL encoding automatically in form submissions and HTTP client libraries. Manual encoding is typically needed when building URLs dynamically in JavaScript, when passing data in URL fragments, or when debugging API calls that include special characters.

Frequently asked questions

What is the difference between %20 and + for spaces?

Both represent spaces, but in different contexts. %20 is the standard URL encoding for spaces and works everywhere. The + sign represents spaces only in query strings using application/x-www-form-urlencoded format (HTML form submissions). When in doubt, use %20.

Do I need to encode UTF-8 characters?

Yes. Non-ASCII characters (accented letters, emoji, Chinese characters, etc.) must be UTF-8 encoded and then percent-encoded for inclusion in URLs. JavaScript's encodeURIComponent() handles both steps automatically, converting characters like รฉ to %C3%A9.