URL Encoder & Decoder

URL Encoding Explained

URL encoding, officially known as percent-encoding, replaces unsafe ASCII characters with a % followed by two hexadecimal digits representing the character's byte value. For example, a space character becomes %20. This encoding ensures that URLs remain valid, unambiguous, and interpretable by web servers and browsers regardless of the data being transmitted. This tool uses JavaScript's native encodeURIComponent function for encoding and decodeURIComponent for decoding. Note that encodeURIComponent is more aggressive than encodeURI — it encodes all characters except a small set of unreserved ones (letters, digits, and the symbols -, _, ., ~), making it the correct choice for encoding query parameter values.

Reserved vs Unreserved Characters

In the URI specification (RFC 3986), characters are divided into two categories: reserved and unreserved. Reserved characters such as ?, &, #, =, and / have special syntactic meaning in a URL. The ? separates the path from the query string, & separates individual query parameters, # denotes a fragment identifier, and = assigns values to keys. Unreserved characters — letters, digits, and a handful of safe symbols — carry no special meaning and can be used literally. When you need to transmit reserved characters as literal data within a query parameter value, you must percent-encode them so the server does not misinterpret the structure of the URL.

When to URL Encode

URL encoding is essential whenever user-supplied or dynamic data is included in a URL. Common scenarios include query parameters — for example, a search term containing spaces or ampersands must be encoded so it is treated as a single value rather than interpreted as URL syntax. HTML form submissions using the GET method automatically apply application/x-www-form-urlencoded encoding to form data; however, when constructing URLs manually in JavaScript or server-side code, you must percent-encode values yourself. API calls frequently require encoded parameters, especially when passing freeform text, JSON snippets, or user identifiers that may contain slashes, colons, or hash symbols. Any character outside the unreserved set that appears in a query parameter, path segment, or fragment identifier should be encoded to guarantee correct transmission. Special attention is needed for the # character, which otherwise truncates the URL (everything after # is treated as a fragment and never sent to the server).

Common Encoding Patterns

Some percent-encoded sequences appear so frequently that they are worth memorizing. A space is encoded as %20 (or sometimes + in application/x-www-form-urlencoded contexts). The hash symbol # becomes %23, preventing it from being interpreted as a fragment identifier. An ampersand & becomes %26, ensuring it is not mistaken for a parameter separator. The equals sign = becomes %3D, and the percent sign itself is encoded as %25 to avoid ambiguity. For international characters and emojis, URL encoding leverages UTF-8 multi-byte sequences: each byte of the UTF-8 representation is percent-encoded individually. For instance, the euro sign € (U+20AC) is encoded as %E2%82%AC, and the smiley emoji 😊 (U+1F60A) becomes %F0%9F%98%8A. This multi-byte encoding ensures that URLs remain ASCII-safe while supporting the full Unicode character set.

Example

For related utilities, see the Base64 Encoder / Decoder for binary-to-text encoding, or the JSON Formatter for working with structured data that often appears in API query parameters and request payloads.