Why URLs Must Be Encoded

A URL is transmitted as a sequence of bytes, but only a narrow subset of ASCII characters is safe to send literally. Letters, digits, and the unreserved symbols hyphen, underscore, period, and tilde pass through untouched. Every other character — spaces, quotation marks, angle brackets, non-ASCII letters, and the reserved delimiters when they appear inside values — must be percent-encoded: replaced by a percent sign and the character's two-digit hexadecimal code. A space becomes %20, an ampersand inside a query value becomes %26, and the euro sign becomes %E2%82%AC in its three-byte UTF-8 form.

JavaScript exposes two encoders with different scopes. encodeURI preserves the reserved characters that structure a URL — / : ? # & = — making it suitable for encoding an entire existing URL. encodeURIComponent encodes those characters too, which is why it must be used for every value you place into a query string: a value containing & or = would otherwise be parsed as separate parameters. Failing to encode user input is the classic source of broken links and a common gateway for parameter injection in web applications.

Using the Encoder

Type or paste any string — a full URL, a query value, or plain text with spaces and symbols — and the tool returns both the component-level and full-URI encodings side by side, along with a per-character breakdown that shows exactly which characters were transformed and how. The length comparison chart makes the difference between the two encoders visible at a glance, so you can confirm which one your code should call before you build the link.