Skip to main content

URL Encoder & Decoder

Percent-encode text for a URL or decode it back, choosing component, full-URL, or form encoding, and see the URL broken into parts.

Runs 100% in your browser

Shortcuts
Copy the output
Alt + Shift + C

Your input is saved in this browser only. Reset clears it.

Encoding

encodeURIComponent: for a single query value or path segment. Encodes / ? & = # and spaces.

Encoded

How to use the URL Encoder/Decoder

  1. Choose Encode or Decode.

  2. Pick the encoding: component for a single value, full URL, or form data.

  3. Paste your text. The result updates as you type, with query parameters listed separately.

Example: Encoding a URL three ways

Input
https://example.com/search?q=café & crème brûlée&sort=price up
Output
Component:
https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dcaf%C3%A9%20%26%20cr%C3%A8me%20br%C3%BBl%C3%A9e%26sort%3Dprice%20up

Full URL:
https://example.com/search?q=caf%C3%A9%20&%20cr%C3%A8me%20br%C3%BBl%C3%A9e&sort=price%20up

Form:
https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dcaf%C3%A9+%26+cr%C3%A8me+br%C3%BBl%C3%A9e%26sort%3Dprice+up

Component encoding escapes the structure too, which is what you want when putting a whole URL inside another URL. Full-URL encoding keeps ? and & working, so the address stays usable.

Frequently Asked Questions

What is URL encoding?

URL encoding (percent-encoding) replaces characters that have a special meaning in a URL, or that aren't allowed in one, with a percent sign and their hexadecimal byte values. A space becomes %20 and an ampersand becomes %26, so the value can't be mistaken for URL syntax.

What is the difference between encodeURI and encodeURIComponent?

encodeURIComponent encodes a single piece of a URL, such as one query value, so it also escapes / ? : @ & = + $ and #. encodeURI is for an entire URL and deliberately leaves those characters alone so the URL still works. Use component encoding for values, and full-URL encoding for whole addresses.

Why do spaces become plus signs sometimes?

Form submissions and URLSearchParams use application/x-www-form-urlencoded, where a space is written as + instead of %20. Both appear in query strings. Decoding with the wrong mode leaves stray plus signs or turns real plus signs into spaces, so pick the Form option when you are working with form data.

Why does decoding fail with "invalid percent-encoding"?

A percent sign must be followed by exactly two hex digits. Text containing a literal percent (like "50% off") that was never encoded will fail, as will a string cut off mid-sequence. The tool points at the character that caused it, and a literal percent sign should be written as %25.

About URL encoding

URLs may only contain a limited set of characters, and some of those characters have a job: ? starts the query, & separates parameters, # starts the fragment. Percent-encoding replaces anything else with % followed by the hex value of each UTF-8 byte, so a value can't be mistaken for structure. A space becomes %20, and é becomes %C3%A9.

Base64 solves a related problem for binary data. Base64 Encoding: What It Is and When Developers Use It covers when each belongs in a URL.

Which encoding to use

Component

For one query value or path segment. Escapes / ? : @ & = + $ # too, so the value can't break out of its slot.

Full URL

For an entire address. Leaves the structural characters alone so the URL keeps working, and only fixes spaces and non-ASCII characters.

Form

What HTML forms and URLSearchParams produce: spaces become +, and more punctuation is escaped.

Build query strings with the platform

Most encoding bugs come from concatenating strings by hand. Let the URL API handle the escaping:

const url = new URL("https://example.com/search");

url.searchParams.set("q", "café & crème");

url.toString();  // …/search?q=caf%C3%A9+%26+cr%C3%A8me

Traps worth knowing

  • Double encoding. Encoding an already-encoded value turns %20 into %2520. If you see %25 where you expected a percent-encoded character, something encoded twice.
  • Encoding a whole URL as a component. Correct when you pass one URL inside another (a redirect parameter), wrong when you meant to tidy up an address.
  • Plus signs. In form-encoded data + means a space. A literal plus, such as in an email address, must be %2B.
  • Fragments never reach the server. Everything after # stays in the browser, so it can't be read from a request log or backend.

Non-ASCII domains

Percent-encoding applies to the path, query, and fragment. Host names use Punycode instead: müller.de is sent as xn--mller-kva.de. Browsers convert it for you, which is why a pasted international URL can look different once it's in the address bar.