What is percent-encoding? A guide to URL encoding for developers
Use encodeURIComponent() for individual query parameter values. Use encodeURI() for full URLs. Never hand-roll percent-encoding. If you need URL-safe Base64 (for JWT tokens in URLs), use the URL-safe variant that replaces + with - and / with _.
Percent-encoding (also called URL encoding) replaces characters that aren't safe in a URL with a percent sign followed by two hex digits. Spaces become %20, ampersands become %26, and so on. Any character outside the unreserved set (A-Z, a-z, 0-9, hyphen, underscore, period, tilde) must be percent-encoded for a URL to be valid.
By TechCompare · Updated
How this is calculated
Different parts of a URL have different reserved characters. The query string reserves ? & = and #. The path reserves / ? and #. This is why you can't just encode everything the same way. JavaScript's encodeURIComponent() encodes everything except the unreserved set, which is correct for query parameter values. encodeURI() is less aggressive and keeps URL structure characters intact, which is correct for encoding a full URL. Using the wrong one causes double-encoding bugs (%%2F instead of %2F) or under-encoding (a raw & in a query value that breaks parsing).
Verdict
The reserved character set changes by URL segment, which is why two helpers exist. encodeURIComponent escapes everything outside the unreserved set, which is right for query values. encodeURI keeps structural delimiters intact, which is right for full URLs. Mixing them up causes double-encoding like %%2F or raw ampersands that break query parsing. For JWTs in URLs, swap + for - and / for _.