gizmobench

URL Decoder and Encoder

Paste an encoded link or value on the left and read it back on the right: day%2Fnight becomes day/night, %20 becomes a space and caf%C3%A9 becomes café. What is different here is that the mode has a name and a control rather than being guessed for you, which is the reason a slash sometimes survives a round trip on other pages and sometimes does not. Component mode is for one value inside a URL and escapes the characters that separate the parts of an address. Full URI mode is for a whole address and leaves those separators alone, so %2F stays written as %2F. Form mode is for a field a browser submitted, where a space is a plus and a typed plus is %2B. Both boxes are editable, so typing on the decoded side encodes instead, and a percent sequence that is not valid stops the conversion and names the character position rather than quietly dropping it.

Direction
Mode

Decoding as one Component of a URL: every escape becomes the character it stands for, %2F included, which is what a query value needs.

  • day%2Fnightcomponent mode
    day/night
  • The same in full URI modereserved escapes kept
    day%2Fnight
  • a+b in form modea plus reads as a space
    a b
  • %E0%A4a truncated sequence
    The sequence at position 1 ("%E0%A4") starts a character UTF-8 writes in 3 bytes, but only 2 of them are here. Paste the rest of the sequence, or delete it.

Type in either box: editing the encoded side decodes, editing the decoded side encodes. Swap sends the text you have to the other box, which is the fix for a paste that went in the wrong one. Positions in an error message count characters from the start of the box, beginning at 1.

Which mode, and why it changes the answer. Component is for one piece of a URL: a query value, a path segment, a fragment. It escapes the characters that separate the parts of an address, so a value holding a slash or an ampersand cannot be mistaken for the structure around it. Full URI is for a whole address: it leaves those separators alone, so the link still reads as a link after a round trip, which also means %2F stays written as %2F. Form is for a field a browser submitted, where a space is written as a plus and a plus that was really typed is written as %2B.
Accuracy. Exact, and the mode decides the answer. Component mode escapes the characters that separate the parts of a URL, which is what a query value needs; full URI mode leaves them alone so a whole address survives a round trip; form mode treats a plus as a space, which is right for form submissions and wrong everywhere else.

Common questions

What is the difference between encoding a whole URL and encoding one query value?
It is the difference between Full URI mode and Component mode, and it changes the answer. Component mode escapes every character that separates the parts of an address, so a slash inside a value becomes %2F, an ampersand becomes %26 and an equals sign becomes %3D. That is what one query value, one path segment or one fragment needs, because those characters would otherwise be read as structure. Full URI mode leaves the separators alone and escapes only what is unsafe, so https://example.com/a b?q=1 becomes https://example.com/a%20b?q=1 and still works as a link. The same split runs the other way: decoding day%2Fnight in Component mode gives day/night, while Full URI mode hands back day%2Fnight unchanged, because turning that escape into a slash would change which part of the address the text belongs to. The short rule is to encode the value, not the address, and to reach for Full URI only when you are holding the whole thing.
Why does a plus sign sometimes mean a space?
Because form submissions use an older convention than the rest of the URL. When a browser submits a form it writes a space as a plus sign and a plus that was really typed as %2B. Everywhere else in a URL a plus is just a plus. That is why Form mode here decodes a+b as "a b" while Component mode and Full URI mode both leave it as "a+b", and all three are right in their own place. Form mode on this page matches what a browser actually puts on the wire, character for character, including %21 for an exclamation mark and %7E for a tilde, so a plus you typed survives the round trip as %2B and comes back as a plus rather than a space.
What is %20?
A space. Percent encoding writes a character as a percent sign followed by that character's byte in hexadecimal, and 20 in hexadecimal is 32, the code for a space. The same rule gives %2F for a slash, %3F for a question mark, %25 for a percent sign itself and %C3%A9 for an é, which takes two bytes because anything outside plain ASCII is written as its UTF-8 bytes, one escape each. Decode in any of the three modes and %20 comes back as a space. Encode in Component or Full URI mode and a space goes out as %20; encode in Form mode and it goes out as a plus instead.
What happens when the text has a malformed percent sequence?
The conversion stops and the message beside the box says where the problem is, counting characters from the start at 1. A percent sign with nothing usable after it, such as a bare % or %ZZ, is reported as an escape that is not two hexadecimal digits, and it names %25 as the way to write a literal percent sign. Escapes that are well formed but do not spell a character, such as the truncated %E0%A4, are reported as a sequence that begins a character UTF-8 writes in three bytes with only two of them present. Nothing is returned in either case: no half-decoded string, and no replacement character standing in for bytes the text never had. Fix the input and the message clears itself as you type.
Is the text I paste sent anywhere?
No. The conversion happens in your browser, so there is no server in this, no account and nothing logged. The two settings, the direction and the mode, are remembered in this browser so the tool opens the way you left it, and the text in the boxes is never written to storage or anywhere else. The Start over button above the tool forgets the settings again. There is no length limit either: a link is as welcome as a log file with a hundred thousand escapes in it, and the only ceiling is your own device.
How do I know which mode I need?
Look at what you are holding. One value, the part after an equals sign or between two slashes, is Component. A whole address, starting with https:// and carrying its own query string, is Full URI. A line copied out of a form post or a request body, where the fields are joined by ampersands and the spaces look like plus signs, is Form. If you are unsure, try Component first: it escapes more than Full URI does, so if the result comes back with pieces of the address escaped that you meant to keep, Full URI is the one you wanted. The examples under the tool show the same input in two modes so you can see the difference before you commit to one.

Exact, and the mode decides the answer. Component mode escapes the characters that separate the parts of a URL, which is what a query value needs; full URI mode leaves them alone so a whole address survives a round trip; form mode treats a plus as a space, which is right for form submissions and wrong everywhere else.