URL Encoder & Decoder

URLs can only contain a limited set of ASCII characters, and some of those, such as ?, & and /, have special jobs. URL encoding lets you include anything else (spaces, symbols, other languages, emoji) and lets you use a special character as ordinary data without changing the URL's meaning.

Percent-encoding is the mechanism defined in RFC 3986: a byte is written as % followed by its value in two hexadecimal digits. A space (byte 32, hex 20) becomes %20; an ampersand becomes %26. "URL encoding" and "percent encoding" describe the same thing.

JavaScript has two pairs of built-in functions, and they exist for different jobs:

• encodeURIComponent() / decodeURIComponent() handle one piece of a URL. They encode the structural characters too, so the piece can't break the URL it goes into. This is the URI Component mode.
• encodeURI() / decodeURI() handle a complete URL. They leave its structure alone and only encode what can never appear literally, such as spaces. decodeURI() also deliberately keeps escapes like %2F and %3F, so decoding can't change the URL's structure. This is the Full URI mode.

Here is the same URL through both:

Encode each value on its own, then assemble the URL. For the search term hello world & SEO:

1. Encode the value with URI Component mode: hello%20world%20%26%20SEO
2. Add it after the parameter name: https://q3labs.co/search?q=hello%20world%20%26%20SEO

Because the & became %26, the server reads the whole phrase as the value of q. Left unencoded, & SEO would look like the start of a second parameter. Encoding https://q3labs.co/search?q=hello world as a whole with Full URI gives https://q3labs.co/search?q=hello%20world, which only fixes the space.

In percent-encoding a space is always %20, and that is what encodeURIComponent() and encodeURI() produce. You will also see + used for spaces. That comes from a related but different format, application/x-www-form-urlencoded, which HTML forms and URLSearchParams use for query strings.

• In a query string, most servers read both + and %20 as a space.
• In a path, + is just a plus sign, so %20 is the safe choice.
• A literal plus sign in a value must be encoded as %2B, or a form-style decoder will turn it into a space.

This tool follows the URI standard, so it never turns spaces into + and never decodes + as a space.

URLs are ASCII, so other characters are converted to UTF-8 bytes and each byte is percent-encoded. That is why one character can become a long run: न is %E0%A4%A8 (three bytes), and the rocket emoji is %F0%9F%9A%80 (four). Decoding reverses it exactly. Browsers often display the decoded form in the address bar while sending the encoded one.

If a decoder reports invalid UTF-8, a multi-byte character was usually cut off (for example %E0%A4 without its last byte), or the value was encoded with an old single-byte character set. This tool reports that instead of returning corrupted text.