URL Encoder & Decoder

Understanding Percent-Encoding (URL Encoding)

Uniform Resource Locators (URLs) can only be transmitted over the Internet using the US-ASCII character set. Characters outside this unreserved set—such as spaces, punctuation, symbols, and non-Latin scripts—must be converted into a valid ASCII format. This conversion process is called Percent-Encoding or URL Encoding (defined by RFC 3986).

Reserved vs. Unreserved Characters

RFC 3986 divides characters into unreserved characters (alphanumeric characters A-Z, a-z, 0-9, and - _ . ~) which never need encoding, and reserved characters (such as : / ? # [ ] @ ! $ & ' ( ) * + , ; =). Reserved characters have special syntax meanings within a URI. For example, ? demarcates the query string and & separates query parameters.

encodeURI vs. encodeURIComponent

Choosing the correct JavaScript URL encoding function depends on the context:

• encodeURI(): Used when you want to encode a complete, valid URL. It preserves protocol delimiters (http://), domain slashes, and query indicators (?).
• encodeURIComponent(): Used when encoding a single parameter key or value to be embedded inside a query string. It encodes reserved characters like /, ?, and & so they don't break the query string structure.

UTF-8 Character Conversion

When encoding international characters or emojis (e.g. café or 🚀), the browser first converts the character into its UTF-8 multi-byte representation. Each byte is then represented by a percent sign followed by a two-digit hexadecimal number (e.g. %C3%A9 for é).