URL Encode & Decode

Understanding URL Encoding and Decoding

Every link you click and every form you submit relies on a quiet bit of plumbing called URL encoding. It is the mechanism that lets a web address carry text containing spaces, accented letters, ampersands, slashes and every other character that would otherwise confuse a browser or a server. This tool converts ordinary text into its safe, percent-encoded form and turns encoded strings back into readable text, and it does the whole job inside your browser without sending a single character to a server.

What Is URL Encoding?

A URL, or Uniform Resource Locator, is built from a limited set of characters. The standard that defines URLs (RFC 3986) only permits a small, predictable alphabet: the letters A to Z in both cases, the digits 0 to 9, and a handful of punctuation marks. Anything outside that set, including spaces, must be represented indirectly. URL encoding, also called percent-encoding, solves this by replacing each unsafe character with a percent sign followed by two hexadecimal digits that describe the character's byte value. A space, for example, becomes %20, and an ampersand becomes %26. Decoding simply reverses the process, reading each %XX sequence back into the character it represents.

Why Encoding Is Necessary

Imagine you want to link to a search results page for the phrase "fish & chips". If you dropped that text straight into a query string, the ampersand would be read as a separator between two parameters, and the space would break the address entirely. The result would be a broken link, a misread parameter, or a request that never reaches the right page. Encoding removes that ambiguity. By turning the space into %20 and the ampersand into %26, the entire phrase travels as one intact value that the receiving server can unambiguously decode back into "fish & chips". Without this step, anything beyond plain ASCII letters and digits would be unreliable on the web.

Reserved Versus Unreserved Characters

The URL standard divides characters into two important groups. Unreserved characters are always safe and never need encoding: the uppercase and lowercase letters, the digits, and the four marks hyphen, period, underscore and tilde (- . _ ~). Reserved characters have special structural meaning in a URL and include : / ? # [ ] @ ! $ & ' ( ) * + , ; =. These characters act as delimiters; the slash separates path segments, the question mark introduces the query string, the ampersand separates parameters, and the hash marks the start of a fragment. When a reserved character is meant to be part of the actual data rather than a delimiter, it must be encoded so it is not misinterpreted as structure.

encodeURIComponent Versus encodeURI

This is the single most important distinction to understand, and it is exactly what the mode selector at the top of the tool controls. JavaScript ships with two encoding functions, and they differ in how aggressively they encode reserved characters.

encodeURIComponent is designed for a single piece of a URL, such as one query parameter value or one path segment. It encodes almost everything that has special meaning, including / ? : @ & = + $ #. Use it whenever you are inserting a value into a larger URL, because it guarantees your value will not accidentally introduce a delimiter. Choose the "Component" mode for this behaviour, and it is the default here because it is the option people need most often.

encodeURI is designed to encode a complete, already-assembled URL. It deliberately leaves the reserved structural characters alone so that an address remains a valid address. It will encode a space into %20, but it will not touch the slashes, the question mark or the ampersands that hold the URL together. Choose the "Full URL" mode when you have an entire link with special characters in it and you want to make it transmittable without dismantling its structure.

A simple rule of thumb: if you are encoding a value that goes inside a URL, use Component mode; if you are encoding a whole URL, use Full URL mode. Picking the wrong one is the most common cause of links that look encoded but still break.

Real-World Use Cases

URL encoding appears everywhere once you start looking. When you build a query string such as ?q=hello%20world&lang=en, each value should be component-encoded so that special characters inside it cannot be confused with the & and = separators. When a browser submits form data, it encodes every field automatically before sending it. When you share a link that contains a name with an accent or a search term with punctuation, encoding keeps the link intact across chat apps and email. And when you call a REST API, path parameters and query values almost always need encoding so that a customer name like "O'Brien & Sons" reaches the server exactly as typed.

The Curious Case of Spaces and the Plus Sign

Spaces deserve special attention because they are encoded in two different ways depending on context. In the path and most of a URL, a space becomes %20, and that is what both encoding functions in this tool produce. However, in the older application/x-www-form-urlencoded format used by HTML form submissions and many query strings, a space is historically encoded as a plus sign (+) instead. This means a + in a query string can sometimes mean a literal plus and sometimes mean a space, which is a classic source of confusion. Because a literal plus is a reserved character, encodeURIComponent correctly turns it into %2B, removing the ambiguity. If you decode a value and a space appears where you expected a plus, the original was probably form-encoded; you may need to convert + to a space yourself before decoding.

Step-by-Step: How to Use This Tool

Getting a clean result takes only a moment. First, choose your encoding mode: leave it on Component for a single value, or switch to Full URL for a complete link. Second, type or paste your text into the input box. Third, click Encode to produce the percent-encoded form, or Decode to turn an encoded string back into readable text. The result appears instantly in the output box. Use the Swap button to move the output back into the input, which is handy for round-tripping or for decoding something you just encoded. The Copy button places the result on your clipboard, and Clear empties both boxes so you can start fresh.

Troubleshooting Malformed and Double-Encoded URLs

Decoding can fail when the input is not valid percent-encoding. The most common cause is a stray percent sign that is not followed by two valid hexadecimal digits, for example a literal % in the middle of some text. When that happens this tool shows a friendly error instead of crashing, so you can spot the problem and fix it. Another frequent issue is double encoding, where a string was encoded twice and now shows sequences like %2520 (which is an encoded %20). To recover the original, decode it twice: decode once to get %20, then decode again to get the space. If a decoded result still looks half-encoded, run it through Decode one more time. Conversely, if your encoded output looks too aggressive, you have probably used Component mode on a full URL; switch to Full URL mode and try again.

Your Privacy: Everything Stays in Your Browser

This tool is completely self-contained. The encoding and decoding are performed by JavaScript running on your own device using the browser's built-in functions, so the text you enter never leaves your computer. There is no upload, no server round-trip, no logging and no account. That matters when you are working with URLs that contain tokens, identifiers, customer details or anything else you would rather not transmit. Because the work happens locally, the tool is also fast and keeps working even if your connection drops. When you close the tab, whatever you typed is gone.