URL Encoder/Decoder

URL encoding, formally known as percent-encoding, is the process of converting characters that are not allowed or have special meaning inside a Uniform Resource Identifier (URI) into a safe, transmittable representation. Every encoded character is replaced by a percent sign (%) followed by two hexadecimal digits that represent the character's byte value in UTF-8.

The modern web relies on URLs to identify every resource — web pages, API endpoints, images, and more. Because URLs are plain ASCII strings, any character outside the allowed set must be escaped before it can be safely embedded in a request. A space, for instance, cannot appear literally inside a URL; it must be written as %20. An ampersand (&) separates query parameters, so if your data actually contains an ampersand it must be encoded as %26 to avoid being misread as a separator.

Two JavaScript functions implement percent-encoding for different use cases: encodeURIComponent and encodeURI. Understanding when to use each one is key to writing correct web applications. encodeURIComponent is the safer default for individual values — it encodes everything that is not an unreserved character. encodeURI is designed for full URL strings and deliberately leaves structural characters like /, ?, #, and & untouched.

This URL encoder and decoder tool performs both operations in your browser, with no data ever sent to a server. Paste any text or encoded URL string, choose your function, and the output updates instantly.

The page exposes two encoding types, and choosing the right one avoids subtle bugs that are hard to debug in production.

encodeURIComponent

encodeURIComponent encodes every character that is not in the set of unreserved characters defined by RFC 3986: uppercase and lowercase letters (A–Z, a–z), digits (0–9), and the symbols - _ . ! ~ * ' ( ). All other characters — including /, ?, #, &, =, @, +, and spaces — are converted to their percent-encoded equivalents. This makes it the right choice whenever you are encoding a value that will appear inside a query string or path segment, because those structural delimiters must not appear unescaped inside a value.

encodeURI

encodeURI is designed for encoding a complete URL. It preserves the full set of characters that are legal in a URI — including the structural delimiters : / ? # [ ] @ ! $ & ' ( ) * + , ; = — so that a full URL string remains a valid URL after encoding. Use encodeURI when you need to clean up a URL that contains non-ASCII characters (for example, a URL with Unicode letters in the path) without breaking its structure.

Every web developer encounters percent-encoding repeatedly. The table below lists the characters most commonly seen in URLs and their encoded equivalents. All encodings use the UTF-8 byte values for ASCII characters, so the hex digits are the same regardless of the operating system.

Non-ASCII characters (Unicode) are first converted to their UTF-8 byte sequences and each byte is then percent-encoded. For example, the euro sign € is encoded as %E2%82%AC because its UTF-8 encoding is the three bytes 0xE2 0x82 0xAC.

URL encoding is not just a theoretical concept — you encounter it constantly in day-to-day web development. Here are the most important situations where correct encoding is critical.

Building Query Strings Manually

When constructing a URL from user-supplied data in JavaScript, always run each parameter value through encodeURIComponent before appending it to the URL. If a user types "coffee & tea" into a search box and you concatenate it directly, the ampersand will be interpreted as a parameter separator, silently splitting your single parameter into two. The correct approach is:

const url = '/search?q=' + encodeURIComponent(userInput);

API Requests and Fetch Calls

REST APIs frequently accept IDs, names, and filters as path segments or query parameters. A product named "Dress/Blouse" contains a forward slash that would be misread as a path separator. Encoding it as Dress%2FBlouse ensures the server receives the correct value. The browser's built-in URL and URLSearchParams APIs handle encoding automatically, which is why they are preferred over manual string concatenation.

OAuth and Authentication Redirect URIs

OAuth flows pass a redirect_uri as a query parameter. Because the URI contains its own colons, slashes, and question marks, the entire value must be percent-encoded with encodeURIComponent. Failure to encode it is a common source of broken OAuth implementations.

Storing Data in URL Hash or History API

Single-page applications often serialize application state into the URL hash or pathname. Any state values that originate from user input must be encoded before being written to location.hash or passed to history.pushState, and decoded when read back.

Internationalized Domain Names and Non-ASCII Paths

Web servers increasingly serve content under non-ASCII paths — for example, a Japanese language page at /ja/製品. Browsers display these in decoded form but transmit the percent-encoded bytes over HTTP. Use encodeURI (not encodeURIComponent) when encoding a full URL with a non-ASCII path, so the slashes and structural characters remain intact.

URL decoding is the exact inverse of encoding. The JavaScript functions decodeURIComponent and decodeURI replace every %XX sequence with the corresponding UTF-8 character. Use this tool's decode mode when you receive a percent-encoded URL or string — from a server log, an error message, a redirect parameter, or an API response — and need to read its human-friendly form.

decodeURIComponent is the counterpart to encodeURIComponent. It decodes every percent-encoded sequence in the string, including those representing structural characters like %2F (/) and %3F (?). Use this when decoding a value that was encoded as a component (a query string value, a path segment, etc.).

decodeURI is the counterpart to encodeURI. It does not decode sequences that represent structural URI characters — specifically %2F, %3F, %23, %26, %3D, and a few others — because doing so might break the URL structure. Use this only when decoding a full URL that was encoded with encodeURI.

A common pitfall is calling decodeURIComponent on a string that contains a literal % not followed by two valid hex digits. This throws a URIError. The tool catches this error and displays the message so you can identify the malformed sequence. Always validate or sanitize percent-encoded input from untrusted sources before decoding.

URL decoding is also essential for reading server-side logs. Web frameworks often log the raw, percent-encoded request URI. Pasting the logged URL into this decoder instantly gives you the readable form, saving time when debugging encoded characters in production URLs.