URL Encoder/Decoder

URL Encoding in JavaScript

Use encodeURI() when encoding a complete URL you control. Use encodeURIComponent() when encoding a value that will be placed inside a query string parameter — it encodes & = # and other characters that encodeURI() intentionally leaves alone.

// encodeURI — encodes a full URL, preserves structural characters
const url = 'https://example.com/search?q=hello world&lang=en';
encodeURI(url);
// → 'https://example.com/search?q=hello%20world&lang=en'
// Note: & and = are preserved — they are valid URL structure

// encodeURIComponent — encodes a single value, escapes everything
const query = 'price=10&discount=5';
'https://example.com/redirect?url=' + encodeURIComponent(query);
// → 'https://example.com/redirect?url=price%3D10%26discount%3D5'
// Note: & and = are encoded — they are data, not structure here

// Decoding
decodeURIComponent('hello%20world%21');
// → 'hello world!'

URL Encoding in Practice

URL encoding becomes critical the moment special characters enter your data. The most common failure point is query parameter values: if a redirect_uri, callback URL, or search query contains & or = characters and you use encodeURI() instead of encodeURIComponent(), those characters will be misinterpreted as parameter separators by the receiving server. OAuth 2.0 in particular requires strict percent-encoding of the redirect_uri parameter as defined in RFC 6749, and misencoding it is one of the most frequent causes of OAuth flow failures.

RFC 3986 defines three categories of characters in a URI: unreserved characters (A-Z, 0-9, hyphen, dot, underscore, tilde) which are never encoded; reserved characters (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) which have structural meaning and should only appear unencoded in their structural roles; and everything else which must be percent-encoded. In practice this means your encoding strategy depends on context: path segments, query values, and fragment identifiers each have different rules about which characters are safe to leave literal.

Common URL Encoding Bugs

• Double-encoding: running encodeURIComponent() on a string that is already encoded produces %2520 instead of %20 — always check whether your input is raw or pre-encoded.
• Encoding the # character inside a query parameter value — browsers split on # before parsing query strings, so an unencoded # truncates everything after it.
• Confusing space as + vs %20 — application/x-www-form-urlencoded (HTML forms) uses + for spaces, but RFC 3986 URLs require %20; mixing conventions breaks decoding.
• Using encodeURIComponent() on an entire URL — this encodes the :// and / characters, producing a broken result; use it only on individual values, not full URLs.
• Forgetting to encode non-ASCII characters before building URLs manually — always let the encoding functions handle UTF-8 conversion rather than doing it by hand.