DevKraken

URL Encoder / Decoder

By · Updated

Percent-encode or decode any string. Switch between component mode (safe for query string values) and full-URL mode (safe for already-built links). Built on the same browser primitives your code uses.

Encoder / decoder

Mode and direction
Output
0 chars
hello%20world%20%26%20friends%3F

Reserved character reference

The characters with structural meaning in a URL — and what each mode does with them.

Char Encoded Name When it's encoded
(space) %20 Space Always — never legal as a raw space in a URL.
! %21 Exclamation Component only. encodeURI leaves it.
# %23 Hash / fragment delimiter Component only. In a full URL it starts the fragment.
$ %24 Dollar Component only.
& %26 Ampersand Component only. In a full URL it separates query params.
' %27 Apostrophe Component only.
+ %2B Plus Component only — in a query string, '+' is sometimes decoded as a space.
, %2C Comma Component only.
/ %2F Slash Component only. In a full URL it separates path segments.
: %3A Colon Component only. In a full URL it separates the scheme.
; %3B Semicolon Component only.
= %3D Equals Component only. In a full URL it joins a query key and value.
? %3F Question mark Component only. In a full URL it starts the query string.
@ %40 At sign Component only. In a full URL it precedes user-info.

Two modes, one rule

If you take only one thing from this page: encode values, not URLs. The component mode is almost always what you want, because almost everything that ends up in a URL was a value at some point — a search term, an email address, a product slug.

The uri mode is for the one case where someone hands you an already-assembled URL with special characters in it (think a URL pasted from a chat app that contains spaces or unicode), and you need to make it valid without changing what each path segment and query value actually means.

If you find yourself decoding and re-encoding a URL more than once to get it right, that's a sign you're encoding at the wrong layer. Encode each piece before you concatenate them — not after.

Frequently asked

When should I use encodeURIComponent vs encodeURI?
encodeURIComponent for values; encodeURI for an already-assembled URL. The difference is what they treat as 'reserved': encodeURIComponent escapes every character with structural meaning in a URL (&, =, /, ?, #, :, @) because the input is a value being dropped into a URL. encodeURI leaves those alone — the input is already a URL and those characters are part of its structure. As a rule, if you're building a query string by hand, encode each value with encodeURIComponent and then join them with literal & and = characters.
What does percent-encoding mean?
Percent-encoding (also called URL encoding) represents a byte as a percent sign followed by two hex digits. A space becomes %20, an ampersand becomes %26, an em-dash becomes %E2%80%94 (UTF-8 encoded). It exists because URLs originally allowed only a small ASCII subset, and the percent escape gives every other byte a way in.
Why does my URL contain %2520 instead of %20?
Because someone encoded a space twice. The first pass turned the space into %20; the second turned the % in %20 into %25, leaving %2520. This is the classic 'double-encoded' bug. The fix is to decode once and re-encode only the values you actually mean to encode — not the entire URL after assembly.
Is + the same as %20 in a URL?
Not quite. In a URL path, + is a literal plus sign and %20 is a space; they're different characters. In the query string, the application/x-www-form-urlencoded format (used by HTML forms) decodes + as a space, which is why query strings often have + where you'd expect a space. Modern browsers' decodeURIComponent does NOT decode + to a space — you have to do that yourself if you're parsing form data.
Does the encoder handle emoji and non-Latin characters?
Yes. The underlying encodeURIComponent and encodeURI primitives encode using UTF-8, so a flag emoji or a string of Japanese kanji produces the right multi-byte percent sequence. Decode the output and you'll get the original Unicode back.
What does 'URI malformed' mean when decoding?
A percent sign that isn't followed by two valid hex digits. %2 with nothing after it, or %ZZ, or a stray % in the middle of otherwise plain text. The decoder can't guess what was intended, so it throws. Either fix the input or encode it first.

Related tools

All tools →