🔗 URL Encoder / Decoder: Percent-Encode and Decode URLs

By Shihab Mia · Updated 2026-07-05

Encoding function

Encodes every reserved character. Use this for a single query value, path segment, or form field.

Text to encode

Encoded result

Type above to see the encoded output.

This URL encoder decoder converts text to and from percent encoding directly in your browser, with no upload and no sign-up. Switch to Encode to make text safe for a URL using encodeURIComponent for a single value or encodeURI for a whole address, or switch to Decode to turn a percent-encoded string such as hello%20world back into readable text. The result updates live as you type, and a malformed input is caught and explained rather than crashing the page.

What is the URL Encoder / Decoder?

Percent encoding is the mechanism that lets any character travel safely inside a URL. A URL may only contain a limited set of ASCII characters, and some of those (like the space, the ampersand, the question mark and the equals sign) already have a structural meaning. To carry a character that is either unsafe or reserved, you replace it with a percent sign followed by the two hexadecimal digits of its byte value. A space becomes %20, an ampersand becomes %26, and a non-ASCII character is first turned into its UTF-8 bytes and each byte is encoded, so the euro sign becomes %E2%82%AC. Decoding simply reverses this: every %XX group is read back into the byte it stands for and the bytes are reassembled into text.

JavaScript ships two encoders and the choice between them is the single most important decision this tool exposes. encodeURIComponent escapes every reserved character, which is exactly what you want when you are encoding one isolated piece of data, such as a single query-string value, one path segment, or a form field. encodeURI is looser: it deliberately leaves the URL delimiters (the colon, slash, question mark, hash, ampersand and equals among others) untouched so that a complete, already-structured URL stays valid after encoding. Encoding a full URL with encodeURIComponent would break it by escaping its own slashes and colons, while encoding a lone value with encodeURI would fail to escape an ampersand inside it and corrupt the query string.

Decoding uses a single function, decodeURIComponent, which reverses the output of both encoders because encodeURI only produces a subset of what encodeURIComponent produces. The one thing decoding can do that encoding cannot is fail. If the input contains a stray percent sign, or a percent followed by something that is not two valid hex digits, or a byte sequence that is not valid UTF-8, the decoder throws a URIError. A robust tool must catch that error and tell you where the problem is instead of showing a blank screen, which is exactly what happens here: a bad input surfaces a friendly message in red rather than an uncaught exception.

Everything runs locally with the same built-in functions the browser uses for real navigation, so the output matches what a server will actually receive. Because nothing is sent anywhere, the tool is safe for URLs that contain tokens, session identifiers, or other private query values. That local-only design also means it works offline once the page has loaded, and there is no rate limit, no queue, and no account to create before you can encode or decode a single string.

When to use it

Encoding one query-string value, such as a search term with spaces and an ampersand, so it can be appended to a URL without breaking the rest of the query.
Encoding a full URL that you need to pass as a redirect target or a callback parameter, using encodeURI so its own slashes and colons survive.
Decoding a percent-encoded link copied from an email, a log file, or an analytics report so you can read the real path and parameters.
Preparing a UTF-8 value (an accented name, a non-Latin word, an emoji) for a URL and confirming it round-trips back to the original after decoding.
Debugging a broken link by decoding it to see whether a value was double-encoded, where %2520 appears instead of %20.
Building an API request by hand and encoding each parameter value correctly before assembling the query string.

How to use the URL Encoder / Decoder

Choose Encode to make text URL-safe, or Decode to turn a percent-encoded string back into plain text.
In Encode mode, pick the encoding function: encodeURIComponent for a single value or component, or encodeURI for a whole URL.
Type or paste your text into the input box. The result appears in the output box below and updates as you type.
If you are decoding and the input is malformed, read the red error message, fix the stray percent sign or incomplete escape, and try again.
Press Copy to put the result on your clipboard.
Press Swap to send the output back into the input, which flips the mode so you can verify a value round-trips.

Formula & method

Encode (component): result = encodeURIComponent(text), which escapes every reserved character. Encode (whole URL): result = encodeURI(text), which preserves the delimiters : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Each escaped character maps to a percent sign plus two hex digits per UTF-8 byte, so space becomes %20 and & becomes %26. Decode: result = decodeURIComponent(text), reversing every %XX group; a malformed sequence throws and is reported as an error.

Worked examples

Encode the value hello world & a=b for a single query parameter (encodeURIComponent).

Start with the raw text: hello world & a=b
The space between hello and world becomes %20.
The ampersand, which would otherwise start a new parameter, becomes %26.
The equals sign, which would otherwise separate a key and value, becomes %3D.
Letters, digits and the safe characters stay as they are.

Result: hello%20world%20%26%20a%3Db

Encode the full URL https://x.com/search?q=a b using encodeURI so the structure survives.

Start with: https://x.com/search?q=a b
encodeURI leaves the scheme, slashes, question mark and equals sign untouched because they are URL delimiters.
Only the space in the value is unsafe, so it becomes %20.
The rest of the URL is already valid and is returned unchanged.

Result: https://x.com/search?q=a%20b

Decode the percent-encoded string caf%C3%A9%20%E2%98%95 back to text.

Read each %XX group as a byte: %C3 %A9 form the UTF-8 bytes for the letter e with an acute accent.
%20 is a single space.
%E2 %98 %95 form the three UTF-8 bytes of the hot beverage symbol.
Reassemble the decoded bytes into text.

Result: cafe with an accent and a coffee symbol (shown as the real characters).

Common characters and their percent-encoded form

Character	Percent-encoded	Why it is encoded
space	%20	Not allowed raw in a URL.
&	%26	Separates query parameters.
=	%3D	Separates a parameter key from its value.
?	%3F	Starts the query string.
#	%23	Starts the fragment.
/	%2F	Separates path segments.
+	%2B	Can be read as a space in query strings.
%	%25	Introduces an escape, so it must be escaped itself.

encodeURIComponent versus encodeURI: which to use

Situation	Use	Reason
A single query value	encodeURIComponent	Escapes & = ? / so the value cannot break the query.
One path segment	encodeURIComponent	Escapes the slash so it stays one segment.
A whole assembled URL	encodeURI	Keeps : / ? # & = so the URL structure is preserved.
A redirect target parameter	encodeURIComponent	The target URL is a value, so all of it must be escaped.

Characters that are never percent-encoded (unreserved set)

Group	Characters	Note
Letters	A to Z and a to z	Always safe.
Digits	0 to 9	Always safe.
Marks	- _ . ! ~ * ' ( )	Left unescaped by encodeURIComponent.

Common mistakes to avoid

Using encodeURI on a single value. encodeURI leaves the ampersand and equals sign unescaped. If your value contains a=b or x&y and you use encodeURI, those characters survive and silently corrupt the query string. Encode a lone value with encodeURIComponent instead.
Using encodeURIComponent on a whole URL. encodeURIComponent escapes the colon and the slashes, so https://example.com becomes https%3A%2F%2Fexample.com, which is no longer a working URL. Encode a complete URL with encodeURI, or only encode the individual values inside it.
Double encoding. Encoding text that is already encoded turns %20 into %2520, because the percent sign itself gets escaped to %25. If you see %25 where you expected a plain percent, decode once to recover the intended value, then encode exactly once.
Assuming a plus sign means a space. In the query string of some form submissions a plus sign stands for a space, but decodeURIComponent does not treat it that way and returns a literal plus. If a value looks wrong, replace + with a space before decoding, or check how it was encoded.
Ignoring the decode error on a stray percent sign. A percent sign that is not followed by two valid hex digits is invalid and makes the decoder throw. A lone % or a truncated %E0% will fail. Fix or complete the escape, then decode again.

Glossary

Percent encoding: Replacing a character with a percent sign and the two hexadecimal digits of each of its UTF-8 bytes, so a space becomes %20.
encodeURIComponent: A JavaScript function that escapes every reserved character, used to encode one URL component such as a single query value.
encodeURI: A JavaScript function that encodes a whole URL while leaving the delimiters (: / ? # & =) unescaped so the address stays valid.
decodeURIComponent: The function that reverses percent encoding, turning each %XX group back into the character it represents.
Reserved characters: Characters like ? # & = / that have a structural role in a URL and must be encoded when carried as data.
Unreserved characters: Letters, digits, and a few marks (- _ . ! ~ * and quotes and parentheses) that are always safe and are never escaped.
Query string: The part of a URL after the question mark, made of key=value pairs joined by ampersands.
UTF-8: The character encoding used before percent encoding, where each character becomes one to four bytes that are then escaped individually.

Frequently asked questions

What does a URL encoder decoder do?

A url encoder decoder converts text to and from percent encoding. Encoding replaces unsafe or reserved characters with percent escapes such as %20 for a space, so the text is safe inside a URL. Decoding reverses that, turning a percent-encoded string back into plain readable text. This tool does both, live, in your browser.

When should I use encodeURIComponent instead of encodeURI?

Use encodeuricomponent when you are encoding a single piece of data, such as one query value or one path segment, because it escapes every reserved character including & = ? and /. Use encodeuri only when you are encoding a whole, already-structured URL, because it deliberately leaves those delimiters intact so the URL keeps working.

How do I decode a URL?

Switch to Decode mode and paste the percent-encoded string. The tool runs decodeURIComponent, which reads every %XX group back into the character it stands for, so hello%20world becomes hello world. You can decode both encodeURIComponent and encodeURI output with the same decoder.

Why does my decode fail with an error?

Decoding fails when the input is not valid percent encoding. The usual cause is a stray percent sign that is not followed by two hex digits, an incomplete escape like %E0% that is cut off, or bytes that are not valid UTF-8. Fix or complete the escape and try again. The tool shows a friendly red message instead of crashing.

What is percent encoding?

Percent encoding is the standard way to carry any character inside a URL. Each unsafe character is turned into its UTF-8 bytes, and every byte is written as a percent sign plus two hexadecimal digits. That is why a space is %20 and an ampersand is %26. It is sometimes called URL encoding.

Does this tool upload my URLs to a server?

No. All encoding and decoding runs locally in your browser using the built-in encodeURIComponent, encodeURI and decodeURIComponent functions. Nothing is sent anywhere, so you can safely encode or decode URLs that contain tokens, session ids, or other private query values.

Why did my space turn into %20 in one tool and + in another?

Both represent a space, but in different contexts. Percent encoding always uses %20. Some HTML form submissions use the application/x-www-form-urlencoded format, which encodes a space as a plus sign. This tool produces %20; if you receive a value with plus signs, replace them with spaces before decoding.

How do I encode a redirect or callback URL that goes inside another URL?

Treat the inner URL as a value, not as structure. Use encodeuricomponent on the whole target URL so its colons, slashes and ampersands are all escaped, then place the escaped result as a parameter value. Decoding it later with decodeURIComponent gives you the original URL back.

What is double encoding and how do I fix it?

Double encoding happens when you encode text that was already encoded, so %20 becomes %2520 because the percent sign itself is escaped to %25. To fix it, decode the value once to recover the single-encoded form, confirm it looks right, then encode exactly once if you still need to.

Which characters never get encoded?

The unreserved set is always left alone: the letters A to Z and a to z, the digits 0 to 9, and the marks hyphen, underscore, period, exclamation mark, tilde, asterisk, single quote, and parentheses. Everything else is either reserved or unsafe and gets a percent escape when you use encodeURIComponent.