🔗 URL Encoder / Decoder

URL Encoding: The Percent Sign's Secret Life

URLs have rules. The original specification (RFC 3986) says URLs can only contain a limited set of characters: A-Z, a-z, 0-9, hyphen, underscore, period, and tilde. Everything else must be percent-encoded. Understanding why and how prevents debugging headaches.

Percent-Encoding: The Basics

Percent-encoding replaces special characters with %XX, where XX is the character's ASCII value in hexadecimal. For example:

• Space becomes %20
• ! becomes %21
• # becomes %23
• & becomes %26
• = becomes %3D

The rule: if a character isn't in the allowed set, encode it. Simple.

The encodeURI vs. encodeURIComponent Trap

This is where developers get burned:

• encodeURI: Encodes a complete URL but leaves alone: A-Z, a-z, 0-9, ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
• encodeURIComponent: Encodes everything including those "safe" characters

Example: If you have a URL parameter that contains "path/segment", using encodeURI gives you "path/segment". Using encodeURIComponent gives "path%2Fsegment". Use the wrong one and your URL breaks.

Reserved vs. Unreserved Characters

The URL spec divides characters:

• Unreserved (don't encode): A-Z, a-z, 0-9, -, _, ., ~
• Reserved (have meaning, encode in context): :/?#[]@!$&'()*+,;=%

The tricky part: reserved characters sometimes need encoding and sometimes don't. In a query parameter value, & should be encoded. In the path, / should not be. In a fragment, # should not be. Context matters.

Common Encoding Mistakes

• Double-encoding: Encoding an already-encoded string. %25 is the encoded %, so "%20" becomes "%2520". Decode before encoding.
• Encoding too much: Using encodeURIComponent on a full URL breaks the URL structure. Encode individual parameter values, not entire URLs.
• Encoding too little: Not encoding user input that contains special characters leads to URL parsing errors.

Unicode in URLs

URLs were designed for ASCII. Unicode characters (like emoji or non-Latin scripts) require percent-encoding too:

• "你好" becomes %E4%BD%A0%E5%A5%BD
• "café" becomes caf%C3%A9
• "😀" becomes %F0%9F%98%80

Some browsers auto-encode Unicode in URLs; others don't. Always encode explicitly for consistency.

Step-by-Step Guide

1. Enter your URL or encoded string — Paste a complete URL or just the part you need to encode/decode.
2. Choose your operation — Select Encode URL, Decode URL, Encode Component, or Decode Component.
3. Review the result — See the transformed URL in the output area.
4. Copy the result — Copy the encoded or decoded URL for use in your code or browser.

Tips & Best Practices

• Always encode query parameter values — Spaces become %20, ampersands are reserved characters. Encode values before adding to URLs.
• Use encodeURIComponent for values only — It encodes everything including reserved URL characters (/, ?, &). Use encodeURI for full URLs.
• Reserved characters to remember — ? (query), & (parameters), = (assignment), # (fragment), / (path). These have special meaning and should not be encoded in their context.
• Decode when debugging — If you see garbled text with %20 and %3D, that is URL encoding. Decode to read the original values.