URL encoder
Both encodings, side by side, because the classic bug is using the wrong one: component encoding for values, URI encoding for whole addresses.
Guide
How to use it
- Type or paste the text, both encodings render live.
- Building a query string value (the search term, the redirect target)? Copy the encodeURIComponent row.
- Fixing a whole URL that contains spaces or unicode? Copy the encodeURI row, it preserves the :// and ? structure.
- The reserved-character table at the bottom is the reference when a single character is the question.
Examples
The two encodings, told apart
As a search value: fish%20%26%20chips, the ampersand must encode or it starts a new parameter and your query becomes just "fish". This is the bug the component row prevents.
https://example.com/café menu → encodeURI keeps the slashes and colon working while fixing the space and é. Run it through the component encoder instead and the URL itself breaks.
Putting a URL inside another URL (?next=https://…) needs full component encoding of the inner one, the commonest real-world case where the distinction bites.
Method
How it works
encodeURIComponent escapes everything with structural meaning (including / ? & = #), right for a value embedded in a URL. encodeURI escapes only what cannot appear at all (spaces, unicode), right for a complete address whose structure must survive. Both convert to UTF-8 percent-escapes, é is %C3%A9, two bytes.
The page shows both because naming which one you need is the entire skill, once named, the encoding is mechanical.
FAQ
Frequently asked questions
Which encoding do I want?
Value inside a URL: component. Whole URL: URI. When unsure, you are almost always encoding a value, component.
Why did + appear instead of %20?
Form encoding (application/x-www-form-urlencoded) uses + for spaces, a third convention from HTML forms. The decoder here accepts both.
Do I need to encode letters and numbers?
Never, unreserved characters (letters, digits, - _ . ~) pass through all encoders untouched by design.
What is double encoding?
Encoding already-encoded text: %20 becomes %2520. It happens in redirect chains and shows up as visible %25 sequences, decode twice to unwind it.
Does encoding make data safe or secret?
Neither, it is transport formatting, trivially reversed. Escaping for security (against injection) is context-specific and belongs in your framework.
Why does my URL work unencoded in the browser bar?
Browsers quietly fix casual addresses for you. Code, APIs and HTML attributes extend no such courtesy, encode properly there.
More tools