Developer & Tech

URL Encoder & Decoder

What this does

Percent-encode query-string components or whole URLs, and decode escaped strings back; malformed escapes are caught cleanly.

Enter your details

Runs in your browser

Calculator inputs

How to use it

Using the url encoder & decoder

  1. 01

    Choose component or full URL

    Query-parameter values want component mode; complete URLs want full mode.

  2. 02

    Encode, or decode an escape sequence

    Switch direction to read what an encoded string actually says.

  3. 03

    Watch for decode errors

    A lone % not followed by two hex digits is reported instead of crashing.

Good to know

Component vs full URL, concretely

encodeURIComponent applied to a whole URL escapes the slashes and question mark too, wrecking the address; that is why it belongs on parameter VALUES. encodeURI keeps the structural characters intact so the overall shape survives. Pick per position, not by habit.

Where bugs hide

  • Double encoding; %2520 means %20 was encoded twice
  • + vs %20; servers decode “+” as space only in form bodies
  • Unencoded & inside values truncates parameters
  • Non-ASCII needs UTF-8 bytes before escaping

How it's calculated

The math behind this calculator

percent-encoding: unsafe byte → %XX (two hex digits)

Component mode applies encodeURIComponent semantics: every character with reserved URL meaning (?, &, /, =, spaces…) becomes %XX percent escapes; the right choice for values embedded inside query strings.

Full-URL mode applies encodeURI semantics, preserving structural characters so an entire URL remains navigable while illegal characters (spaces, non-ASCII) still get escaped. Decoding reverses either form and reports malformed percent sequences explicitly.

Assumptions & limitations

  • Encoding produces uppercase hex escapes.
  • Spaces become %20 rather than “+”; the plus form belongs to form-body conventions.
  • Decoding assumes UTF-8 percent sequences.

Worked example

Encoding the component “a b&c=d” escapes the space and both reserved characters, producing a value safe to embed in any query string.

FAQ

Frequently asked questions

Which mode should I use for fetch() query params?
Component mode on each individual key and value, then join them yourself; never full-URL mode for fragments.
Why do I see both %20 and + out there?
%20 is standard percent encoding; + is a legacy form-body convention where it means space. They are not interchangeable in query strings.
My decode failed; why?
Malformed input: typically a literal % sign that was itself never encoded. The error points this out; fix the upstream encoding.
Are emoji handled?
Yes; they encode as multiple UTF-8 bytes, each becoming its own %XX escape, and decode back losslessly.

Keep exploring

Related calculators