URL Encoder Guide: encodeURIComponent vs encodeURI Explained

Why URL encoding exists

A URL is a structured string, and a handful of characters carry structural meaning: ? starts the query, & separates parameters, = binds a key to a value, # introduces a fragment, and / separates path segments. The moment your data contains one of those characters — a search term with an ampersand, a redirect path with a slash, a name with a space — the browser or server can no longer tell your data apart from the URL’s structure. Percent-encoding solves this by replacing unsafe characters with a % followed by two hexadecimal digits, so a space becomes %20 and an ampersand becomes %26.

The URL Encoder / Decoder does this transformation both ways, instantly and in your browser. But it offers two modes, and choosing the wrong one is the most common source of subtle URL bugs. This guide explains exactly when to use each.

The two modes: Component vs Full URL

JavaScript exposes two encoding functions, and the tool wraps both.

Component mode (encodeURIComponent)

Component mode treats its input as a single piece of data that will be dropped into a larger URL. It encodes everything that isn’t an unreserved character — letters, digits, and a few symbols like - _ . ~. Critically, it encodes the structural characters too:

Input:  name=John & Co/Ltd
Output: name%3DJohn%20%26%20Co%2FLtd

Notice that =, &, and / all got encoded. That’s exactly what you want for a query-parameter value, because those characters inside a value would otherwise be misread as URL structure.

Use Component mode when you are encoding:

• a single query-parameter value (a search term, a filter, a redirect target)
• a path segment that may contain reserved characters
• any user-supplied string before you append it to a URL you’re building

Full URL mode (encodeURI)

Full URL mode assumes you’re handing it an entire, already-structured URL and you want to make it safe without destroying its anatomy. It deliberately leaves the structural characters alone:

Input:  https://x.com/search?q=hello world&page=2
Output: https://x.com/search?q=hello%20world&page=2

The space became %20, but the ://, ?, &, and = survived. If you’d run that same URL through Component mode, every one of those separators would be mangled and the URL would be unusable.

Use Full URL mode when you have a complete URL containing a stray space or other unsafe character and you just want to clean it up for use in an href or a fetch call.

The rule of thumb: encode the parts, not the whole. Build your URL structure with literal ?, &, and =, and run each value through Component mode. Reach for Full URL mode only when you’ve been handed a finished URL you didn’t assemble yourself. For a deeper walk through which specific characters get encoded and why, read our URL Encoding Explained guide.

Decoding: reading what’s already encoded

Encoding’s reverse is just as useful. Paste a percent-encoded string into the decoder and you get human-readable text back — invaluable for:

• Debugging redirect chains. OAuth redirect_uri values are doubly encoded and unreadable by eye; decode them to confirm the callback is correct.
• Reading server logs. Access logs store the raw, encoded request URL. Decoding reveals what the user actually searched for or submitted.
• Inspecting tracking links. Marketing URLs cram encoded parameters together; decoding shows the real campaign values.

The decoder fails loudly on malformed input — a % not followed by two valid hex digits will throw rather than guess. The tool shows that error inline, which is a feature: it tells you the string was already broken before it reached you.

Common bugs proper encoding prevents

Getting encoding right quietly eliminates a whole category of defects:

1. The plus-sign trap. In query strings, + historically means “space.” If a user’s data legitimately contains a + (like C++), it must be encoded as %2B or it will be read as a space on the other end. Component mode handles this correctly.
2. The ampersand split. A value like Tom & Jerry left unencoded turns one parameter into two, silently dropping data. Encoding the & to %26 keeps the value intact.
3. Broken redirects. Passing a full URL as a parameter value without encoding it means its ? and & collide with the outer URL’s, scrambling both. The target URL must be Component-encoded before it’s appended.
4. Double-encoding. Encoding an already-encoded string turns %20 into %2520. Decode once to check the current state before encoding again — the tool’s Swap & Flip button makes this round-trip easy.

Which characters actually get encoded

It helps to know the three groups of characters, because they explain exactly what each mode does:

• Unreserved characters — the letters A–Z and a–z, the digits 0–9, and - _ . ~. These are always safe and are never encoded by either function. They mean only themselves in every part of a URL.
• Reserved characters — : / ? # [ ] @ ! $ & ' ( ) * + , ; =. These carry structural meaning. Component mode (encodeURIComponent) encodes most of them, because inside a value they’re data, not structure. Full URL mode (encodeURI) leaves the structural ones intact.
• Everything else — spaces, accented letters, emoji, and other Unicode. Both functions encode these. A space becomes %20; a multi-byte Unicode character becomes several percent-pairs, one per UTF-8 byte.

A subtle point worth remembering: neither encodeURI nor encodeURIComponent encodes the apostrophe-adjacent set ! ' ( ) * even though they’re technically reserved. In rare cases (some legacy parsers, certain OAuth signature schemes) you may need to encode those manually after running the tool. For the overwhelming majority of web work, the tool’s two modes cover everything correctly.

A practical workflow

When you’re assembling a URL in code or by hand:

1. Write the skeleton with literal separators: https://api.site.com/search?q=&sort=.
2. Take each dynamic value and run it through the URL Encoder in Component mode.
3. Drop the encoded values into their slots.
4. If you’ve instead been handed a complete URL with a visible space or unsafe character, run the whole thing through Full URL mode once.
5. Before shipping, paste the final URL into the decoder to confirm every value decodes back to what you intended — no double-encoding, no dropped parameters.

Encoding is a small, mechanical step, but skipping it or doing it in the wrong mode is behind a surprising share of 400 errors and broken links. Keep the URL Encoder open while you work and the structure-versus-data question answers itself.