How to Use This Tool
Type anything and see both encodings at once. The right one depends on whether you are encoding a whole URL or a value that will sit inside one.
Which function to use
encodeURI— for a complete URL. It deliberately leaves: / ? & = # +untouched, because those characters are the URL's structure. Encoding them would destroy it.encodeURIComponent— for a single value going into a query parameter, a path segment or a fragment. It escapes those same characters, because inside a value they are data rather than syntax.
The failure modes are different, which is why the mistake survives. Use encodeURI on a
value and it works until the value contains an &, at which point the server sees an
extra parameter. Use encodeURIComponent on a whole URL and it breaks immediately —
https%3A%2F%2F is not a URL anyone can route.
The plus sign problem
A space is %20 in a URL path. In application/x-www-form-urlencoded data
— what an HTML form submits, and what many query strings use — a space is +
instead.
So a+b means "a plus b" in a path and "a space b" in form data, and there is nothing in
the string to say which. Decode with the wrong assumption and plus signs vanish into spaces, or spaces
appear where a literal plus was meant. The checkbox above lets you decode either way; if you are
handling a query string from a form, tick it.
Double encoding
Encoding an already encoded string escapes the percent signs, so %20 becomes
%2520. The visible symptom is a page title or a search box showing literal
%20 where a space should be.
It usually happens when a value is encoded at one layer and encoded again by a framework that assumed
it was raw. This page flags %25 in your input, since that is the reliable fingerprint.
What each character costs
Non-ASCII text is encoded as UTF-8 bytes, so one Chinese character becomes three escape sequences and
nine characters — 漢 is %E6%BC%A2. That is worth knowing when a URL is
approaching a length limit, or when a query string with a lot of non-English text looks unexpectedly
enormous.
Prefer the URL API where you can
In modern JavaScript, URLSearchParams handles encoding for you and gets the rules right,
including the plus sign convention:
new URL(...)parses and normalises a URL properly.params.set('q', 'tom & jerry')encodes the value correctly without you choosing a function.
Hand-building query strings with string concatenation is where these bugs come from. Use it for debugging, not for production code.
