What is URL encoding?

URL encoding, also called percent encoding, rewrites characters that cannot appear literally in a URL as a percent sign followed by two hex digits representing a byte. It is defined in RFC 3986. Spaces, non-Latin text, emoji and reserved punctuation all need it, because a URL is limited to a small set of ASCII characters and several of those carry structural meaning.

What is the difference between encodeURI and encodeURIComponent?

encodeURI is for a complete URL and leaves the characters that give a URL its structure intact, including the slash, colon, question mark, hash and ampersand. encodeURIComponent is for a single value and escapes those too. As a rule: build the URL yourself, run each parameter value through encodeURIComponent, and reach for encodeURI only when you have a whole address that simply contains spaces or non-ASCII characters.

Should a space become %20 or a plus sign?

In a URL path or query string, %20 is correct and is what this tool produces. The plus sign belongs to form submission encoding, application/x-www-form-urlencoded, where a space is written as a plus and a real plus is written %2B. Most server frameworks accept both in a query string, but only %20 is correct in a path, so prefer it unless you are specifically emulating a form post.

Why does the plus sign in my email address disappear?

Because something in the chain treated the query string as form-encoded and read the plus as a space. Encode the value with encodeURIComponent so the plus becomes %2B before it goes into the URL, and it will survive. This bites often with tagged addresses of the form name+label@example.com used for filtering.

Can it handle non-Latin text and emoji?

Yes. Text is converted to UTF-8 bytes first, so Japanese, Chinese, Korean, Cyrillic, Greek, accented Latin characters and emoji all encode and decode correctly. Expect the output to look long: each character becomes one escape per byte, so a three-byte character produces nine characters of output.

My decoded text is garbled. What went wrong?

Three causes account for nearly all of it. The string was encoded with a legacy encoding such as Shift_JIS or Latin-1 rather than UTF-8, in which case the bytes simply do not form valid UTF-8. The string was encoded twice, so one decode leaves you with another layer. Or plus signs in the original were meant as spaces and have not been converted. This tool is UTF-8 only, which is the modern standard and what browsers produce.

Why does decoding sometimes throw an error?

Because the input contains a percent sign that is not followed by two valid hexadecimal digits, which makes it malformed rather than merely unusual. A stray percent in free text, or a truncated escape at the end of a copied string, will both do it. Check that every percent sign has exactly two hex characters after it.

Does it encode the hash and fragment?

It depends on the mode. encodeURIComponent turns a hash into %23, which is what you want when the hash is part of a value, for example a search for a hashtag. encodeURI leaves it alone, because in a whole URL the hash marks the start of the fragment. Passing an unescaped hash inside a query value is a common way to lose everything after it.

Is it safe to paste a URL that contains a token?

Yes. The conversion happens in your browser and the URL is never sent anywhere, stored or logged. Internal endpoints, signed URLs, OAuth state and redirect parameters can all be pasted here. As with any tool, treat a value you have shown on a shared screen as exposed.

Is the URL I convert sent to a server?

No. Encoding and decoding both run as JavaScript in the page, and the input and output stay on your machine. Closing the tab discards them.

URL Encoder & Decoder – Percent Encoding, encodeURIComponent

URL Encoder / Decoder

Method

// INPUT

// OUTPUT

The result appears here...

💡 encodeURIComponent: use for query parameter values. Encodes / : ? # as well.

// URL Encoder / Decoder: Features

The two functions, and why picking the wrong one breaks things

encodeURIComponent treats its input as one value and escapes nearly everything that is not alphanumeric, including the slash, colon, question mark, ampersand and hash. encodeURI treats its input as a complete URL and deliberately leaves those structural characters alone so the address still works. Use the first for a query parameter value or a single path segment, and the second when you want to tidy up an entire URL that contains spaces or non-Latin characters. Applying encodeURI to a value that itself contains an ampersand is the classic bug: the ampersand survives and silently splits your value into two parameters.

What percent encoding actually does

The input is first converted to bytes using UTF-8, then any byte that is not an unreserved character is written as a percent sign followed by two hexadecimal digits. Unreserved characters, per RFC 3986, are the ASCII letters and digits plus hyphen, underscore, period and tilde. A character outside ASCII becomes several escapes, one per byte: the Japanese character for "a" takes three bytes in UTF-8 and so becomes %E3%81%82, and most emoji take four bytes and become four escapes.

Spaces: %20 or a plus sign

Both appear in the wild and they come from different specifications. RFC 3986, which governs URLs, encodes a space as %20, and that is what encodeURIComponent produces. The plus sign comes from the older application/x-www-form-urlencoded format used when an HTML form is submitted, where a plus means a space and a literal plus must be written %2B. The practical consequence is that a value containing a plus sign, such as an email address with a tag, can arrive at the server as a space unless it was encoded properly.

Double encoding, and how to spot it

Encoding an already-encoded string escapes the percent signs themselves, turning %E3%81%82 into %25E3%2581%2582. A single decode then returns the intermediate form rather than the original text, which is why a value sometimes needs decoding twice. The tell-tale sign is a run of %25 in a URL. Explicit encode and decode modes make this easy to avoid here: decode once, confirm you have readable text, and only then encode.

URLs carrying an API key stay in the page

Conversion runs as JavaScript in your browser using the standard encodeURI, encodeURIComponent and their decoding counterparts. Nothing you paste is transmitted, stored or logged, so internal hostnames, query strings carrying API keys and OAuth state values are all safe to work with here. To take a URL apart into scheme, host, path, query and fragment instead, use the URL Parser.

// URL Encoder / Decoder: FAQ

What is URL encoding?: URL encoding, also called percent encoding, rewrites characters that cannot appear literally in a URL as a percent sign followed by two hex digits representing a byte. It is defined in RFC 3986. Spaces, non-Latin text, emoji and reserved punctuation all need it, because a URL is limited to a small set of ASCII characters and several of those carry structural meaning.
What is the difference between encodeURI and encodeURIComponent?: encodeURI is for a complete URL and leaves the characters that give a URL its structure intact, including the slash, colon, question mark, hash and ampersand. encodeURIComponent is for a single value and escapes those too. As a rule: build the URL yourself, run each parameter value through encodeURIComponent, and reach for encodeURI only when you have a whole address that simply contains spaces or non-ASCII characters.
Should a space become %20 or a plus sign?: In a URL path or query string, %20 is correct and is what this tool produces. The plus sign belongs to form submission encoding, application/x-www-form-urlencoded, where a space is written as a plus and a real plus is written %2B. Most server frameworks accept both in a query string, but only %20 is correct in a path, so prefer it unless you are specifically emulating a form post.
Why does the plus sign in my email address disappear?: Because something in the chain treated the query string as form-encoded and read the plus as a space. Encode the value with encodeURIComponent so the plus becomes %2B before it goes into the URL, and it will survive. This bites often with tagged addresses of the form name+label@example.com used for filtering.
Can it handle non-Latin text and emoji?: Yes. Text is converted to UTF-8 bytes first, so Japanese, Chinese, Korean, Cyrillic, Greek, accented Latin characters and emoji all encode and decode correctly. Expect the output to look long: each character becomes one escape per byte, so a three-byte character produces nine characters of output.
My decoded text is garbled. What went wrong?: Three causes account for nearly all of it. The string was encoded with a legacy encoding such as Shift_JIS or Latin-1 rather than UTF-8, in which case the bytes simply do not form valid UTF-8. The string was encoded twice, so one decode leaves you with another layer. Or plus signs in the original were meant as spaces and have not been converted. This tool is UTF-8 only, which is the modern standard and what browsers produce.
Why does decoding sometimes throw an error?: Because the input contains a percent sign that is not followed by two valid hexadecimal digits, which makes it malformed rather than merely unusual. A stray percent in free text, or a truncated escape at the end of a copied string, will both do it. Check that every percent sign has exactly two hex characters after it.
Does it encode the hash and fragment?: It depends on the mode. encodeURIComponent turns a hash into %23, which is what you want when the hash is part of a value, for example a search for a hashtag. encodeURI leaves it alone, because in a whole URL the hash marks the start of the fragment. Passing an unescaped hash inside a query value is a common way to lose everything after it.
Is it safe to paste a URL that contains a token?: Yes. The conversion happens in your browser and the URL is never sent anywhere, stored or logged. Internal endpoints, signed URLs, OAuth state and redirect parameters can all be pasted here. As with any tool, treat a value you have shown on a shared screen as exposed.
Is the URL I convert sent to a server?: No. Encoding and decoding both run as JavaScript in the page, and the input and output stay on your machine. Closing the tab discards them.

// How to Use URL Encoder / Decoder

Paste the text or URL

Put the value into the input box. It can be plain text with spaces and non-Latin characters, a full URL, or an already-encoded string such as %E3%81%82 that you want to read.
Choose the mode and the method

Pick ENCODE or DECODE, then choose COMPONENT for a single parameter value or path segment, or URI for a complete URL whose structure you want to preserve. The hint under the output states which rule is being applied.
Copy the encoded URL

The output updates as you type. Copy it with one click and paste it into your browser, a curl command or your code. SWAP moves the output back into the input, which is a quick way to confirm that a value round-trips unchanged.

Category Encoding