URL Encoder and Decoder

What actually separates encodeURI from encodeURIComponent

JavaScript ships two encoding functions and the difference between them is not a matter of taste. encodeURIComponent escapes every delimiter that could appear inside a URL part: ampersand, equals, question mark, slash. encodeURI assumes you are encoding a whole address and leaves those delimiters alone, because escaping them would destroy the URL structure. A tool that offers only one of them is wrong in half of all use cases, which is why the mode here is an explicit choice.

1const value = 'a&b=c';2 3encodeURIComponent(value); // 'a%26b%3Dc'  -> correct for a query VALUE4encodeURI(value);          // 'a&b=c'      -> & and = preserved5 6// The practical consequence:7'/search?q=' + value;                     // '/search?q=a&b=c'8// The server reads q=a plus a separate parameter b=c.9 10'/search?q=' + encodeURIComponent(value); // '/search?q=a%26b%3Dc'11// The server reads q with the value 'a&b=c'. This is the correct one.

Form encoding and the plus-sign trap

HTML forms and a great many query strings use the application/x-www-form-urlencoded format. It is a close relative of percent-encoding with one critical difference: a space is written as + rather than %20. As a result the plus character now carries two possible meanings. If you need to transmit a literal plus, it has to be encoded as %2B, otherwise the receiving side reads a space.

1// Encoding: in form mode a space becomes +, a real plus becomes %2B2encodeURIComponent('one two+three').replace(/%20/g, '+');3// 'one+two%2Bthree'4 5// Decoding: the + to space conversion must happen BEFORE decodeURIComponent,6// or a literal %2B turns into + first and is then wrongly read as a space.7const input = 'one+two%2Bthree';8 9decodeURIComponent(input);                    // 'one+two+three'  <-- wrong10decodeURIComponent(input.replace(/\+/g, ' ')); // 'one two+three'  <-- right11 12// Phone numbers are the classic casualty of this bug:13decodeURIComponent('%2B905551234567'); // '+905551234567'14new URLSearchParams('tel=+905551234567').get('tel'); // ' 905551234567' <-- plus lost

Non-ASCII text is encoded as UTF-8 bytes

Percent-encoding escapes bytes, not characters. Every non-ASCII character is first converted to UTF-8 bytes, and each byte is then written as its own %XX sequence. Turkish letters occupy two bytes in UTF-8, so a single letter expands into two percent-escapes. That makes an encoded URL harder to read by eye, but the behaviour is entirely predictable.

1encodeURIComponent('ş'); // '%C5%9F'   (two bytes)2encodeURIComponent('ı'); // '%C4%B1'3encodeURIComponent('İ'); // '%C4%B0'4encodeURIComponent('ğ'); // '%C4%9F'5encodeURIComponent('a'); // 'a'         (ASCII is left alone)6 7encodeURIComponent('çiçek'); // '%C3%A7i%C3%A7ek'8 9// An emoji takes four bytes:10encodeURIComponent('🚀'); // '%F0%9F%9A%80'

The hostname is a separate story. In an address such as https://çiçek.com the domain is not percent-encoded at all: it is carried as punycode, and the browser rewrites it to https://xn--iek-3lac.com. Percent-encoding applies only to the path, query and fragment. If you work with internationalised domain names, normalise both representations before comparing them server-side.

Errors raised while decoding

decodeURIComponent does not shrug off invalid input, it throws a URIError. A stray percent sign, a truncated byte sequence, or an invalid UTF-8 combination all trigger it. In a React application an uncaught error of this kind reaches the error boundary and clears the screen. This tool always runs decoding inside a try/catch and reports the failure as an ordinary validation result.

1decodeURIComponent('%');        // URIError: URI malformed2decodeURIComponent('%E0%A4%A'); // URIError: third byte is missing3decodeURIComponent('%ZZ');      // URIError: not valid hex4 5// The safe form:6function safeDecode(text) {7  try {8    return { ok: true, value: decodeURIComponent(text) };9  } catch {10    return { ok: false, error: 'Malformed percent-escape' };11  }12}13 14// Encoding has exactly one failure mode: an unpaired surrogate.15encodeURIComponent('\uD800'); // URIError: no UTF-8 representation