URL Encoding Deep Dive: UTF-8, Percent-Encoding, and Query String Pitfalls

The Anatomy of a Uniform Resource Identifier (URI)

According to RFC 3986, a URI is composed of a restricted set of characters: unreserved characters (letters, digits, hyphen, period, underscore, and tilde) and reserved characters (delimiters like :, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =).

Any byte outside this character set—including non-ASCII characters such as spaces, accented letters, emoji, and non-Latin scripts—must be represented via percent-encoding.

How Percent-Encoding Converts Bytes

In percent-encoding, an arbitrary byte is written as a percent sign followed by two hexadecimal digits representing the byte value. For example, a space becomes %20.

encodeURI vs encodeURIComponent in JavaScript

• encodeURI: Encodes a full URL. It preserves reserved delimiters (/ ? # & =).
• encodeURIComponent: Encodes an individual parameter value intended for insertion into a query string or path segment, ensuring delimiters like & and = inside parameter values are safely escaped.