URL Encoder / Decoder

A URL encoder and decoder with the encodeURIComponent versus encodeURI choice made explicit: Component escapes / and & inside a query value, Full URL leaves them standing.

Text to encode

Component-encoded

The encoded text appears here.

Every escape it adds is marked.

Direction

Mode

Lines

Each line separately

What changed

—escaped

How to use

Choose the Direction: Encode for raw text heading into a URL, Decode for an escaped value coming back out of one.
Choose the Mode: Component for a single query value or path segment, Full URL for a whole address you want to stay clickable, Form field for a form body. Tick Each line separately to convert a list line by line and keep the line breaks.
Type or paste into the first well. The second well and the report under it follow as you type; Copy output takes the result, and the swap between the wells sends it back as the input with the direction turned round.

About this tool

Percent-encoding is the trick that lets a URL carry a space, an ampersand or a Hindi word without falling apart. Choose Encode or Decode, type or paste, and the converted text appears in the second well as you go, every escape marked to show what moved. Nothing guesses the direction for you, because a%20b is a perfectly reasonable thing to want encoded a second time.

Mode is the part worth getting right. Component is encodeURIComponent, which escapes every reserved character: https://x.com/a b?q=1 comes back as https%3A%2F%2Fx.com%2Fa%20b%3Fq%3D1, exactly what you need when that whole URL has to sit inside another URL's query parameter. Full URL is encodeURI and leaves the colon, slashes and question mark standing. Form field is the application/x-www-form-urlencoded convention a form body uses, where a space is a plus and a literal plus is %2B.

Decoding says what it could not do. Full URL decoding leaves the escapes of reserved characters as they were, and the page counts them and offers Component in one press. A stray percent sign or a UTF-8 sequence cut short is pointed at by character position, and the last good output stays on screen, dimmed, while you fix it.

A tweet button whose text has a percent sign and an ampersand in it

The share link for a results post needs the sentence Q3 numbers are in: revenue up 12% & churn down tucked into the text parameter of an intent URL. Pasted as it stands, the ampersand would end the parameter at the word up and the percent sign would be read as the start of an escape. With Encode and Component chosen, the output well reads Q3%20numbers%20are%20in%3A%20revenue%20up%2012%25%20%26%20churn%20down the moment the sentence is in, with all twelve escapes marked. The colon has become %3A, the percent sign %25 and the ampersand %26, and that string can sit after text= without disturbing anything around it.

Choose Full URL and the difference is exactly two characters: the colon and the ampersand stay as they were, because encodeURI treats them as structure. The two cards under the controls put 70 characters beside 66 and the well marks the two that stayed, which is the right answer for a whole address and the wrong one for a value inside it.

Good to know

UTF-8 and nothing else. An é goes out as %C3%A9, two bytes, and a backend still reading Latin-1 will be expecting %E9 and will not agree with you.
Whole text in, whole text out. There is no URL parser behind this, so you cannot hand it an address and ask it to escape only the query string.
The hash sign survives Full URL mode. encodeURI keeps # as the fragment marker, so https://x.com/p?tag=c# comes back unchanged, and a # that was meant as data will cut the address short in any browser. Encode that piece in Component mode instead, where it becomes %23.

Frequently asked questions

When should I use encodeURIComponent instead of encodeURI?

Use encodeURIComponent, which is Component mode here, for anything going inside a single piece of a URL: one query value, one path segment, a redirect target. Use encodeURI, which is Full URL mode, when you are holding a complete address that already has its own structure and you only want the unsafe characters cleaned up. Getting this backwards is why a redirect_uri parameter so often arrives truncated at the first ampersand.

Why is my space showing as %20 and not a plus?

%20 is the percent-encoding of a space and it is valid in every part of a URL. The plus sign only means a space inside form-urlencoded request bodies, which is a separate and older convention. Component and Full URL always write %20; choose Form field when the value is going into a form body and you want the plus.

Which characters does Component mode leave alone?

Letters, digits, and then nine punctuation marks: hyphen, underscore, period, exclamation mark, tilde, asterisk, apostrophe and the two round brackets. Paste A-Z_a.z!~*'() into Component mode and it comes straight back out untouched. Everything else, the space and the ampersand and the slash included, gets escaped.

Why does a pasted half emoji refuse to encode?

Emoji outside the basic plane are stored as two halves called a surrogate pair, and a bad copy can leave one half behind. A lone half has no UTF-8 form, so no URL can carry it; the page names the character position, keeps the last good output and leaves the decision to you.

Is anything I paste sent to a server?

No. The conversion is the browser's own encodeURIComponent, encodeURI and URLSearchParams running in this tab, so a token or a signed link you paste stays on your machine.

Missing something in URL Encoder / Decoder? Suggest a feature →