URL Encoder and Decoder

Runs locally

Percent-encode or decode URLs and query values as you type.

Component mode encodes everything that could end a value — & = ? / # — so use it for one query value or path segment.

Text

Encoded

Characters that were encoded (component rules)

: %3A/ %2F? %3F= %3Dé %C3%A9␠ %20& %26è %C3%A8
Guide

Percent-encoding depends on which part of the URL you are writing

Percent-encoding (RFC 3986) replaces a byte with % and two hex digits, so %20 is a space and %C3%A9 is é in UTF-8. Which characters must be encoded depends on where the text goes: & and = are fine in a path but end a query parameter, and / is fine in a query value but splits a path segment.

JavaScript gives you two functions for that. encodeURIComponent encodes everything except letters, digits and - _ . ! ~ * ' ( ), which is right for one query value or path segment. encodeURI leaves the characters that give a URL its structure — : / ? # & = — alone, which is right for a whole URL that only needs its spaces and non-ASCII text escaped. To see how a finished URL splits into those parts, inspect it in the URL parser.

Spaces have two spellings. RFC 3986 uses %20; HTML form submission (application/x-www-form-urlencoded) uses +. Servers decode + as a space only in the query string, so choose to match what the receiver expects. The grammar is in RFC 3986.

Query value

café & crème/2

Two scopes

Component  caf%C3%A9%20%26%20cr%C3%A8me%2F2
Full URI   caf%C3%A9%20&%20cr%C3%A8me/2

?q=caf%C3%A9%20%26%20cr%C3%A8me%2F2  ← one value
?q=caf%C3%A9%20&%20cr%C3%A8me/2      ← & starts a new parameter

Encoding a query value with encodeURI leaves & unescaped, and the server reads everything after it as a second, broken parameter.

Where people get caught

Double encoding

Encoding an already-encoded value turns %20 into %2520. The server then decodes once and sees the literal text %20. This tool flags %25XX in decoded output and offers a second decode.

+ is only a space in the query

A + in a path is a literal plus. A + in a query value is read as a space by form parsers, so a real plus (in a phone number or a Base64 string) must be sent as %2B.

Encoding the whole URL with encodeURIComponent

It escapes the :// and every /, producing https%3A%2F%2F… which is no longer a link. Encode each component, then join them.

A lone % in the text

"100%" is not valid percent-encoding; decoders throw. Encode a literal percent sign as %25 — the error here names the exact position.

About URL encoding

How it works in 4 steps · 4 common use cases · 4 questions answered

How it works

  1. 1.Choose Encode or Decode, then the scope: one component or a full URI.
  2. 2.Choose whether spaces are written as %20 or +.
  3. 3.Type or paste; the result updates as you type, with any malformed sequence pointed out.
  4. 4.Copy the result, or send it to the URL parser to see its parts.

Common use cases

  • •Building a redirect_uri or callback parameter by hand
  • •Reading an encoded URL from an access log or an error report
  • •Fixing a link that arrives double-encoded
  • •Checking what a form submission actually sends

FAQ

What is the difference between encodeURI and encodeURIComponent?

encodeURIComponent escapes the separators & = ? / # too, for a single value. encodeURI keeps them, for a whole URL. Use the component form for anything you insert into a URL.

Should a space be %20 or +?

Both are common. %20 is correct everywhere in a URL; + means space only in form-encoded query strings. When in doubt, use %20.

What is double encoding?

Encoding text that was already encoded, so %20 becomes %2520. It usually happens when two layers of code each encode the same value. Decode twice, and fix the code so only one layer encodes.

Which characters must be encoded?

Anything outside A–Z a–z 0–9 - . _ ~ when it is data rather than structure, plus every non-ASCII character (encoded as its UTF-8 bytes).

Related tools