What is URL Encoding (Percent-Encoding)?

URL encoding, also known as Percent-Encoding, is a mechanism for encoding information in a Uniform Resource Identifier (URI) under certain circumstances. It's commonly used when characters outside the standard ASCII set, or characters with special meaning in URLs (like spaces, ?, &, #, %), need to be included in a URL path or query string parameter.

The encoding process replaces unsafe characters with a percent sign (`%`) followed by the two-digit hexadecimal representation of the character's byte value (in UTF-8). For example, a space character is encoded as `%20`.

How It Works (using JavaScript functions)

Encoding (`encodeURIComponent`): This function encodes special characters, including those with special meaning in URLs like `:`, `/`, `;`, and `@`, making it suitable for encoding query string parameters or parts of a URL path. It assumes UTF-8 encoding for the input string.

Decoding (`decodeURIComponent`): This function decodes a previously percent-encoded URI component back into its original string representation. It correctly handles multi-byte UTF-8 sequences represented by multiple %XX codes. It throws a `URIError` if the input contains invalid percent-encoding sequences.

• Encodes reserved characters (`:`, `/`, `?`, `#`, `[`, `]`, `@`, `!`, `$`, `&`, `'`, `(`, `)`, `*`, `+`, `,`, `;`, `=`) as well as non-alphanumeric ASCII characters and characters outside the ASCII range.
• Does *not* encode unreserved characters: `A-Z a-z 0-9 - _ . ~`
• Decoding correctly interprets `%XX` sequences.
• Handles UTF-8 characters automatically.

Note: There is also `encodeURI` and `decodeURI`, which encode/decode *less* aggressively and are meant for encoding a full URI while preserving its structure (they don't encode reserved characters like `/`, `?`, `#`). `encodeURIComponent` is generally safer for individual components.

Use Cases

URL encoding is essential for web functionality:

• Query String Parameters: Ensuring values in `?key=value&other=value` are transmitted correctly, especially if values contain spaces or special characters (e.g., `search?q=hello%20world`).
• URL Path Segments: Including characters like spaces or slashes within a logical path segment if needed (though often avoided by design).
• Form Submissions: Web browsers automatically URL-encode form data (using `application/x-www-form-urlencoded`) before sending it to the server.
• API Calls: Passing data containing special characters safely within API request URLs.

Why is URL Encoding Important?

Without URL encoding, URLs containing special characters could be misinterpreted by browsers, servers, or proxies, leading to broken links or incorrect data processing.

• Compatibility: Ensures URLs work consistently across different systems and software.
• Clarity: Prevents ambiguity by clearly separating reserved URL characters from encoded data characters.
• Data Integrity: Guarantees that data passed in URLs arrives at the destination exactly as intended.

How to Use This Tool

1. Select either "Encode" or "Decode" mode.
2. Enter the text or URL component (for encoding) or the percent-encoded string (for decoding) into the top input field.
3. The result will appear automatically in the bottom output field.
4. Use the swap button () to switch the input and output, automatically changing the mode.
5. Click the copy icon () next to the output label to copy the result.
6. Error messages will appear if the input contains invalid percent-encoding sequences during decoding.