URL encoding: when to use encodeURIComponent

How it works

Each character outside the allowed set is written as a percent sign followed by two hexadecimal digits of its UTF-8 byte. encodeURIComponent escapes everything except A-Z a-z 0-9 - _ . ! ~ * ( ) while encodeURI keeps reserved URL punctuation intact.

• Use the component mode for query values; full-URL mode keeps : / ? & = intact.

Why it matters

Query strings break in subtle ways: a search term containing & silently creates a new parameter, a slash inside a filename changes the path, and a space ends up somewhere unexpected. Encoding correctly is the difference between a working link and a support ticket.

A worked example

encodeURIComponent("a b&c") returns a%20b%26c, while encodeURI keeps the & because it treats the string as a whole URL. Choosing the wrong one changes where the query splits.

Common mistakes

• Using full-URL encoding for a single query value.
• Expecting decodeURIComponent to turn + into a space; that is form encoding.
• Encoding twice and wondering why the server sees %2520.

Practical tips

Encode each query value separately, then build the URL from the encoded pieces. If a value already looks encoded, decode it once and re-encode from the decoded form — repeated encoding is the most common source of %25-style bugs.

How to use it

1. Open the tool. Everything runs in your browser tab.
2. Paste or type your input, then choose the action you need.
3. Check the result and copy it with one click.

Open the tool

Common questions