URL Encoder / Decoder

What percent-encoding is, and why URLs need it

A URL can safely carry only a small alphabet: letters, digits and a few punctuation marks. Everything else, including spaces, accented letters, Chinese, Japanese or Arabic text, emoji, and even punctuation that happens to mean something in the URL syntax, has to be written in a safe disguise called percent-encoding. The text is first turned into bytes using UTF-8, and each byte is then written as a percent sign followed by two hexadecimal digits. The letter "é" is two bytes in UTF-8 (C3 A9), so it becomes %C3%A9. A space is one byte (20), so it becomes %20. When you type a search term with accents into an address bar, the browser is doing exactly this before it sends the request.

The rules are defined in RFC 3986, the standard for URI syntax. It sorts characters into three groups. Unreservedcharacters (letters, digits, - . _ ~) never need encoding.Reserved characters have a job in the URL syntax: the general delimiters : / ? # [ ] @ separate the scheme, host, path, query and fragment, and the sub-delimiters ! $ & ' ( ) * + , ; = are used inside those parts, for example& between query parameters. A reserved character must be encoded when you mean it as data rather than as a separator. Every other character must always be encoded.

encodeURIComponent versus encodeURI

JavaScript offers two built-in functions, and choosing the wrong one is the most common source of broken links.encodeURIComponent is for a single piece of data, such as one query value or one path segment. It leaves only letters, digits and- _ . ! ~ * ' ( ) untouched, so every separator is escaped. encodeURI is for a complete address that is already structured. It additionally leaves ; , / ? : @ & = + $ # alone, which keeps the URL working, and escapes only spaces, non-ASCII characters and a few others, such as the square brackets.

Suppose a user searches for "Tom & Jerry". If you put the raw text in a query string, the ampersand starts a new parameter and the server sees "Tom " and a parameter named " Jerry". With encodeURIComponent it becomes Tom%20%26%20Jerry and survives intact. The default mode of this tool is therefore the value mode. Choose whole-URL mode only to tidy an address you have already assembled.

The table below was computed by the browser's own functions when this page was built. The last column shows how URLSearchParams serialises the same character, which is the form-style variant.

Notice three details. First, encodeURIComponent leaves ! ' ( ) * alone even though RFC 3986 lists them as reserved sub-delimiters, not unreserved characters. That is harmless in most places, but a strict encoder (the option in this tool) escapes them too; it matters when the value is later embedded in a context that gives those characters meaning. Second, encodeURI escapes [ and ], which can break IPv6 host literals if you encode a complete address. Third, the form-style serialiser writes a space as + and also escapes the tilde, so its output is not interchangeable with the other two.

Spaces: %20 or +?

In paths and in the generic URI standard, a space is always %20. The plus sign as a space belongs to a different format,application/x-www-form-urlencoded, used by HTML form submissions and many search boxes. That format writes the space as + and a real plus as %2B. The practical consequences are easy to get wrong. If you decode a+b with decodeURIComponent, you get a+b back, because that function does not treat plus as a space. And if you send 1+1=2 as a query value without encoding it, the server may read "1 1=2". Tick the checkbox above to switch to form-style behavior in both directions; leave it off for paths and for any place that follows the generic URI rules. When in doubt, %20 is the safer choice because everything understands it.

Bytes, characters and length

Encoded text is longer than the original, and the growth depends on the script. The table shows the character count, the UTF-8 byte count and the encoded forms.

Each encoded byte costs three characters, so an ASCII letter that must be escaped grows threefold, a typical accented letter sixfold, a Japanese or Chinese character ninefold and an emoji twelvefold. The last row shows why whole-address work needs encodeURI: it keeps ://, ? and &, whereas encodeURIComponent turns the whole address into one opaque value. That is exactly what you want when a URL travels as a parameter inside another URL, for instance a redirect target, and exactly what you do not want for a link you intend to click.

Worked examples

Example 1: a search term. "café au lait" becomes caf%C3%A9%20au%20lait. Append it after https://example.com/search?q= to build the link.

Example 2: a lone percent sign. "100% pure" becomes 100%25%20pure. The percent sign must itself be escaped, because an unescaped one signals the start of an encoded byte. Feeding the raw text 100% pure to the decoder fails for the same reason, since "% p" is not a valid hexadecimal pair.

Example 3: double encoding. Encoding "a b" gives a%20b. If a second layer of software encodes it again, the percent sign becomes %25 and you get a%2520b. Decoding once returns a%20b, which is the sign that something encoded twice. Decode a second time to reach the original.

Example 4: a URL as a parameter. A redirect target https://example.com/a?x=1&y=2 must be encoded as a value, giving https%3A%2F%2Fexample.com%2Fa%3Fx%3D1%26y%3D2, so that its own question mark and ampersand are not mistaken for parts of the outer URL.

Where each part of a URL needs encoding

• Path segments. Encode each segment separately with value mode, so a slash inside a name becomes %2F. Do not encode the separating slashes.
• Query values and keys. Encode each key and value, then join them with = and &. Never encode the finished query string as one block.
• Fragment. The part after # follows similar rules but is never sent to the server.
• Host names. Internationalised domain names use a different scheme (Punycode), not percent-encoding, and this tool does not convert them.

Errors and limits

Malformed sequences. Decoding fails when a percent sign is not followed by two hexadecimal digits, or when the resulting bytes are not valid UTF-8. The classic case is an old URL encoded in a legacy character set such as Latin-1 or Shift_JIS, where a single character is a single byte above 127. The tool reports the problem and clears the result instead of showing garbage.Unpaired surrogates. A string containing half of a surrogate pair, which can happen with truncated emoji, cannot be encoded, and the tool tells you so.Empty input produces an empty result, not an error.Long input. Processing is instant even for large text, but servers, proxies and browsers cap URL length, and a conservative rule of thumb is to keep full URLs under about 2,000 characters.Not a URL parser. This is a text converter. It does not split an address into scheme, host and path, and it will not validate that the result is a working link.

Privacy and security

The conversion uses only functions built into your browser, with no network request and no storage, so what you paste never leaves the page. Keep in mind that encoding is not encryption. Anything placed in a URL can appear in browser history, server and proxy logs and referrer headers, and anyone can reverse the percent-encoding in a second. Do not put passwords, tokens or personal data in query strings. Decoding is also a good habit for checking unfamiliar links: a long encoded address often reveals the real destination domain, which helps you spot phishing attempts.

Using the result

Typical jobs include building an API request by hand, reading an encoded value copied from a log, adding a campaign name with spaces to an analytics tag, and passing a callback address as a parameter. In application code, prefer the language's own URL builder or URLSearchParams to concatenating strings, and encode exactly once at the point where the value enters the URL. For a QR code that opens an encoded address, pair this tool with the QR code generator.

Frequently Asked Questions

Related tools

• Base64 encoder/decoder - another way to carry bytes as text
• QR code generator - turn an encoded address into a scannable code
• Regex tester - pick apart or validate encoded strings
• JSON formatter - tidy JSON before putting it in a parameter