URL Reserved Characters Explained

The URL specification (RFC 3986) splits characters into reserved and unreserved. Knowing the split makes it clear when you must encode and when you don't have to.

Unreserved characters (safe as-is)

Letters, digits, and the four symbols - _ . ~ can appear anywhere without encoding. Encoding them wouldn't change their meaning, so they are normally left alone.

Reserved characters (structural meaning)

Reserved characters divide a URL into parts. To use one as literal data, you must encode it.

• : / ? # [ ] @ — separate the major sections (scheme, path, query, fragment, etc.)
• ! $ & ' ( ) * + , ; = — sub-delimiters, especially for query keys and values

The encodeURI vs encodeURIComponent line

encodeURI preserves those reserved characters, so it won't break the structure of an already-complete URL. encodeURIComponent encodes them all, which is what you want when inserting a fragment such as a single parameter value.

Use encodeURIComponent for a single value and encodeURI for a whole address — remembering just that rule avoids most mistakes.