URL Encoding Explained: encodeURIComponent vs encodeURI (With Examples)

You have seen it in URLs: Hello%20World, caf%C3%A9,%F0%9F%98%8A. Percent-encoding (also called URL encoding) is what makes arbitrary text safe to put in a URL. But JavaScript has four different functions for this — and using the wrong one breaks things in subtle ways.

What is URL encoding (percent-encoding)?

A URL can only contain a specific set of ASCII characters. Anything outside that set — spaces, accented letters, emoji, most punctuation — must be encoded. Each disallowed character is replaced by a % followed by two hex digits representing its UTF-8 byte value. A space becomes %20, & becomes%26, and the emoji 😊 becomes %F0%9F%98%8A.

encodeURIComponent vs encodeURI — which to use?

This is the most common source of confusion.

encodeURIComponent encodes everything except letters, digits, and - _ . ! ~ * ' ( ). It encodes /, ?,#, &, and =. Use this when encoding a value inside a query string — a search term, an email address, a URL being passed as a parameter.

encodeURI encodes everything except the characters that have structural meaning in a URL: it preserves : / ? # & = + @ , ;. Use this when you have a complete URL with spaces or Unicode that needs cleaning up without breaking its structure.

The decode counterparts

decodeURIComponent is the inverse of encodeURIComponent — it decodes all%XX sequences. Use this to read encoded query parameter values.

decodeURI is the inverse of encodeURI — it decodes most sequences but leaves those that would alter the URL structure. Use this to clean up a full URL for display.

Practical examples

Encoding a search query: encodeURIComponent('café & beer') → caf%C3%A9%20%26%20beer. This is safe to append to a URL as a query value.

Encoding a full URL: encodeURI('https://example.com/my café') → https://example.com/my%20caf%C3%A9. The :// and /are preserved.

The URL Analysis panel in our URL encoder automatically parses any valid URL you paste and decodes all query parameters as key/value pairs — useful for debugging API requests or reading tracking URLs.

Common pitfalls

Double-encoding: If you encode an already-encoded string,%20 becomes %2520. Always decode first if unsure.

Using encodeURI for a query value: If your value contains &or =, encodeURI will not encode them, breaking the query string structure. Always use encodeURIComponent for values.