Skip to content
Advertisement

URL Encoder / Decoder

Percent-encode or decode URLs and query-string components.

Converter Text

Direction
Encoding scope

Settings

How URL Encoder / Decoder works

URLs may only contain a restricted set of ASCII characters. Percent-encoding represents everything else as a % followed by two hexadecimal digits of the character’s UTF-8 bytes — so a space becomes %20, and a character outside ASCII becomes several percent-escapes, one per byte.

The critical distinction is which characters count as reserved. Characters such as : / ? # [ ] @ ! $ & ' ( ) * + , ; = have structural meaning in a URL. When they appear as delimiters they must stay literal; when they appear inside a value they must be escaped, or the URL parses into the wrong pieces.

That is why JavaScript offers two functions. encodeURI is for a whole URL and deliberately leaves reserved characters alone so the structure survives. encodeURIComponent is for one piece — a query parameter value, a path segment — and escapes reserved characters too. Using encodeURI on a parameter value is a common bug: an & inside the value silently splits it into two parameters.

One historical wrinkle: in query strings, application/x-www-form-urlencoded encodes a space as + rather than %20. Both appear in the wild, decoders must handle both, and the + form is only valid in the query, never in the path.

Reference

  • Unreserved (never escaped): A–Z a–z 0–9 - _ . ~
  • Reserved (escaped by encodeURIComponent, kept by encodeURI): : / ? # [ ] @ ! $ & ' ( ) * + , ; =
  • Space → %20 everywhere; also → + in application/x-www-form-urlencoded query strings
  • Non-ASCII → UTF-8 bytes, each as %XX (é → %C3%A9)

How to use this decoder

  1. Choose a direction

    Encode to make text safe for a URL; decode to read a percent-escaped string back as plain text.

  2. Choose the scope

    Component mode for a single parameter or path segment; full-URI mode to encode an entire URL while keeping its structure.

  3. Paste the value

    Enter the text to convert. Non-ASCII characters are handled as UTF-8, which is what every modern system expects.

  4. Copy the result

    Copy the encoded value straight into your query string, or the decoded value into your notes.

Worked examples

Ampersand inside a value

Given
q=Ben & Jerry
Result
q=Ben%20%26%20Jerry

Without escaping the &, the server sees a parameter q=Ben and a separate parameter Jerry. This is the classic encodeURI-instead-of-encodeURIComponent bug.

Encoding a redirect target

Given
https://example.com/next?id=7
Result
https%3A%2F%2Fexample.com%2Fnext%3Fid%3D7

A URL used as a parameter value must be fully component-encoded, or its own ? and & terminate the outer query string.

Non-ASCII text

Given
café
Result
caf%C3%A9

Two escapes for one character, because é is two bytes in UTF-8. A single %E9 would be Latin-1 and is a frequent source of mojibake.

When to use it

  • Building a query string by hand and needing values that contain &, =, or spaces.
  • Passing a full URL as a redirect or callback parameter.
  • Reading a percent-escaped URL out of a log file or an error message.
  • Debugging why a search term with punctuation reaches the server truncated.
  • Constructing OAuth authorisation URLs, where every parameter must be component-encoded.

Things to watch out for

  • Encoding an already-encoded string double-encodes it: %20 becomes %2520. If your values arrive with visible %25, something in the chain is encoding twice.
  • Percent-encoding is not escaping for HTML, SQL, or shell. Each context needs its own encoding, and reaching for the wrong one is a security bug rather than a display bug.
  • The + shorthand for space is valid only in query strings. A + in a path is a literal plus sign.
  • Decoding malformed input — a lone % or an invalid hex pair — throws rather than guessing. That is correct behaviour, not a limitation.

Frequently asked questions

What is the difference between encodeURI and encodeURIComponent?

encodeURI encodes a complete URL and leaves reserved characters such as : / ? & = intact so the structure survives. encodeURIComponent encodes a single piece and escapes those characters too. Use component encoding for parameter values; anything else corrupts the URL when the value contains a delimiter.

Why does a space sometimes become + and sometimes %20?

The + form comes from application/x-www-form-urlencoded, the HTML form-submission encoding, and is valid only in a query string. %20 is the general percent-encoding and is valid everywhere. Decoders should accept both in a query; encoders should prefer %20.

What causes double encoding?

Encoding a value that was already encoded. The % of the existing escape is itself escaped to %25, so %20 becomes %2520. It usually happens when two layers — a framework and hand-written code — both encode the same value.

Which characters never need encoding?

The unreserved set: letters, digits, and - _ . ~. Everything else is either reserved, and must be encoded when it appears inside a value, or outside ASCII, and must always be encoded.

How are non-ASCII characters handled?

They are converted to UTF-8 first, then each byte is percent-escaped. So é becomes %C3%A9, not %E9. Seeing single escapes above %7F usually means a legacy Latin-1 encoder produced the string.

Related Developers tools

All developer tools