URL Encoder / Decoder

Percent-encoding has more than one correct answer, and picking the wrong one is why a link works in testing and breaks in production. Encoding a whole address must leave :// and ? intact. Encoding one query value must destroy them, or a stray &splits your value into two parameters. URL Encode and Decode puts the three behaviours on separate buttons instead of choosing for you.

encodeURI protects the reserved syntax characters : / ? # [ ] @ ! $ & ' ( ) * + , ; = so a complete URL survives. encodeURIComponent escapes all of those, which is what a single parameter needs. Raw Percent-Encode goes further still and keeps only the 4 unreserved punctuation marks - _ . ~, matching RFC 3986 to the letter.

Encoding runs over real UTF-8 bytes, so a euro sign becomes %E2%82%AC rather than a mangled single escape. Decoding tries the component decoder first and falls back to the URI decoder, so it reads output from any of the three modes. A reference grid of 12 common characters sits at the foot, and nothing is sent anywhere.

Options: encodeURI, encodeURIComponent and Raw

• Reach for encodeURI when you hold a whole address that merely contains a space or an accent. Given https://example.com/search?q=annual report&lang=en it returns the same string with %20 in place of the space and nothing else touched.
• Reach for encodeURIComponent when the string is going to be a value. The same input becomes https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dannual%20report%26lang%3Den, safe to drop after a ?q=.
• Raw Percent-Encode differs from the component mode on exactly 6 characters: ! ~ * ' ( ). The component encoder leaves them alone, raw escapes them, which some strict server-side parsers and signature schemes require.
• All three encode the percent sign itself, so 100% comes back as 100%25. Encoding an already-encoded string therefore double-escapes it rather than leaving it alone.
• The mode buttons only appear in encode mode. Decoding needs no mode, because a percent escape means the same thing whichever encoder wrote it.

What Happens When a Percent Sign Is Literal

• A % not followed by 2 hex digits is not valid encoded text. Paste 50% off into decode mode and the red panel reports Decode error: URI malformed.
• The fix is direction, not syntax. Switch to encode mode, run the same string, and you get 50%25%20off, which decodes back cleanly.
• A truncated escape fails the same way. Copying a URL that was cut mid-sequence leaves a trailing %E2%82, which is a valid prefix but an incomplete character, and the decoder refuses it.
• Plus signs are left alone in both directions. Some form encoders write a space as + rather than %20, and that convention is not recognised here, so such a string decodes with literal plus signs still in it.
• Switching between encode and decode clears the box deliberately, because an encoded string left behind in encode mode would simply be encoded a second time.