URL Encoder/Decoder

Encode special characters for safe URLs or decode percent-encoded strings back to readable text. Runs entirely in your browser -- your data never leaves your device.

What Is URL Encoding?

URL encoding, formally known as percent-encoding, is a standardized mechanism defined in RFC 3986 for representing characters within a Uniform Resource Identifier (URI) that would otherwise be misinterpreted by browsers, servers, or network intermediaries. The core idea is simple: any character that is not part of the unreserved character set -- letters, digits, hyphens, underscores, periods, and tildes -- can be replaced with a percent sign followed by two hexadecimal digits that represent the character's byte value in UTF-8.

For example, a space character (ASCII code 32, or 0x20 in hexadecimal) becomes %20. An ampersand (&), which normally separates query parameters in a URL, becomes %26 when it appears inside a parameter value. Without this encoding, the browser would misinterpret the ampersand as the start of a new query parameter rather than part of the current one.

URL encoding is not encryption and provides no security. It is purely a transport-safety mechanism that ensures every character in a URL is unambiguous. Any percent-encoded string can be decoded instantly by replacing each %XX sequence with its corresponding character. This tool performs that encoding and decoding in your browser using standard JavaScript functions, meaning your data never leaves your device.

How URL Encoding Works

The percent-encoding algorithm operates on the raw bytes of a character's UTF-8 representation. For characters in the ASCII range (U+0000 to U+007F), each character maps to a single byte, so a single %XX token is produced. For characters outside the ASCII range -- such as accented letters, CJK ideographs, or emoji -- the UTF-8 encoding may produce two, three, or even four bytes, resulting in multiple percent-encoded tokens for a single character.

Consider the Japanese character (mountain). Its Unicode code point is U+5C71. In UTF-8, this is encoded as three bytes: 0xE5, 0xB1, 0xB1. The percent-encoded form is therefore %E5%B1%B1. When a server or browser decodes this, it reassembles the three bytes and recovers the original character.

The algorithm follows these steps:

  1. Convert the input text to a sequence of bytes using UTF-8 encoding.
  2. For each byte, check whether it belongs to the unreserved set (A-Z, a-z, 0-9, -, _, ., ~).
  3. If the byte is unreserved, output it as-is.
  4. If the byte is reserved or otherwise unsafe, output a percent sign followed by the byte's value as two uppercase hexadecimal digits.

The decoding process is the reverse: scan the string for percent signs, read the next two hexadecimal digits, convert them to a byte, and reassemble the UTF-8 byte sequence into the original characters.

encodeURI vs encodeURIComponent

JavaScript provides two built-in functions for URL encoding, and understanding the difference between them is critical for building correct URLs programmatically.

encodeURIComponent() encodes virtually every character that is not an unreserved character (letter, digit, hyphen, underscore, period, tilde). This means it also encodes characters that have special structural meaning in URLs, such as :, /, ?, #, &, and =. It is designed for encoding individual values -- such as a single query parameter, a path segment, or a fragment identifier -- before inserting them into a URL string. If you use encodeURIComponent() on a complete URL, it will break the URL by encoding the :// after the protocol and the slashes in the path.

encodeURI() is designed to encode a full URI while preserving the characters that are structurally significant. It leaves :, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, and = unencoded. This makes it appropriate when you have a complete URL that may contain Unicode characters in the path or query and you want to make it safe for transmission without altering its structure.

In practice, encodeURIComponent() is used far more frequently because developers typically build URLs by concatenating a base URL with individually encoded parameter names and values. Using encodeURI() on parameter values is a common bug that causes subtle issues -- for instance, an ampersand in a parameter value would not be encoded, causing the server to misparse the query string.

This tool defaults to encodeURIComponent mode because it is the correct choice for the most common use case: encoding a value that will be placed inside a URL. Check the "Encode full URL" option to switch to encodeURI mode when you need to encode an entire URL while preserving its structure.

Common URL-Encoded Characters

Below is a reference table of frequently encountered characters and their percent-encoded equivalents. Memorizing a few of these can help you quickly recognize and debug encoded URLs.

Note that the space character has two encodings in common use: %20 in standard percent-encoding (as produced by encodeURIComponent) and + in HTML form submissions (application/x-www-form-urlencoded). These two conventions often cause confusion. The + notation is a legacy of HTML forms and is not part of the RFC 3986 standard. This tool uses the standard %20 form for spaces.

When to Use URL Encoding

URL encoding is necessary in a wide range of web development scenarios. Understanding when and where to apply it helps you avoid broken links, malformed API requests, and security vulnerabilities.

Building query strings. Whenever you construct a URL with query parameters in JavaScript, each parameter name and value should be individually encoded with encodeURIComponent(). For example, if a user searches for "rock & roll", the query parameter should be q=rock%20%26%20roll, not q=rock & roll. Failing to encode the ampersand would cause the server to interpret roll as a new parameter name.

Constructing REST API requests. When sending data to an API via URL parameters, encoding ensures that values containing reserved characters (such as =, &, or /) do not break the URL structure. This is especially important when parameter values come from user input, which can contain any character.

Path segments with special characters. If a URL path segment contains spaces, accented characters, or other non-ASCII characters, it must be percent-encoded. For instance, a file named "my report (final).pdf" in a URL would become my%20report%20%28final%29.pdf.

Redirecting users. When constructing redirect URLs that include a return-to URL as a parameter (e.g., login?redirect=https://example.com/path?key=value), the inner URL must be fully encoded to prevent the outer URL from being misinterpreted.

Form submissions. HTML forms with method="GET" automatically encode form values using the application/x-www-form-urlencoded format. However, when you submit form data programmatically using fetch() or XMLHttpRequest, you are responsible for encoding the values yourself.

Email links (mailto). Special characters in subject lines or body text of mailto: links need to be percent-encoded. For example, mailto:user@example.com?subject=Hello%20World&body=Line%201%0ALine%202 encodes spaces and newlines in the subject and body fields.

Avoiding injection attacks. Properly encoding user-supplied values before inserting them into URLs is a defense-in-depth measure against URL injection and open redirect vulnerabilities. While URL encoding alone is not a complete security solution, it helps prevent unintended interpretation of special characters in URLs.

About This Tool

This URL encoder/decoder runs entirely in your browser using JavaScript. No data is transmitted to any server -- everything happens on your device. It supports full Unicode input including emoji and characters from any language. The tool defaults to encodeURIComponent mode, which is the correct choice for encoding individual query parameters, path segments, or form values. Switch to encodeURI mode using the checkbox when you need to encode a complete URL while preserving its structural characters.

The tool automatically detects URL-encoded text when you paste it, offering a one-click decode option. It provides clear error messages when you attempt to decode a malformed percent-encoded string -- for example, a % sign followed by non-hexadecimal characters. Swap, copy, and clear buttons make it easy to work with your data quickly and efficiently.