When a URL contains spaces, accents or symbols like & and ?, you can't use it as-is: you have to encode it. This guide explains what URL encoding is, which characters must be escaped and when to use each JavaScript function.
What is URL encoding
URL encoding (or percent-encoding) converts characters that aren't safe in a URL into a % sequence followed by their hexadecimal value. For example, a space becomes %20 and the character ñ becomes %C3%B1.
It exists because URLs can only contain a limited set of ASCII characters. Everything else (spaces, accents, emojis, reserved symbols) must be represented with this encoding so it doesn't break the address.
Reserved vs unreserved characters
- Unreserved: letters, digits, and
- _ . ~. They never need encoding. - Reserved: they have a special meaning in the URL and must be encoded if they're part of a value, not the structure:
: / ? # [ ] @ ! $ & ' ( ) * + , ; =.
For example, & separates parameters (?a=1&b=2). If a parameter's value contains a literal &, you must encode it as %26, or it'll break the URL.
encodeURI vs encodeURIComponent
JavaScript has two functions, and choosing wrong is a very common mistake:
encodeURI("https://site.com/search?q=hello world");
// → "https://site.com/search?q=hello%20world"
// Respects the structure: does NOT encode : / ? & =
encodeURIComponent("hello&world");
// → "hello%26world"
// Encodes EVERYTHING, including reserved characters
The rule:
encodeURIfor a full URL (respects://,?,&).encodeURIComponentfor a piece you'll insert into the URL (a parameter's value). This is the one you'll use almost always when building query strings.
When you need to encode
- When putting user text into a URL parameter (searches, filters).
- When building links with accents or spaces.
- When passing data in a query string that contains
&,=,+or#. - In APIs that receive parameters by URL.
Decoding: the reverse path
To read an encoded URL and recover the original text, you decode it with decodeURIComponent. Useful for seeing what a link full of %20 and %C3 actually contains.
You can encode and decode URLs free with the URL encoder on this site, which processes everything in your browser.
Common mistakes
- Using
encodeURIfor a parameter: it doesn't escape&or=, so a value with those characters breaks the URL. UseencodeURIComponent. - Double encoding: encoding something already encoded turns
%20into%2520. Encode only once. +and spaces: in old query strings, a space can be+instead of%20. It depends on context; when decoding forms, keep it in mind.
Frequently asked questions
Why does %20 appear in URLs? It's an encoded space. Spaces aren't valid in a URL.
Which do I use, encodeURI or encodeURIComponent? For a whole URL, encodeURI. For a parameter's value, encodeURIComponent (the most common).
Is my data uploaded when encoding? No, if you use a local tool. Everything happens in your browser.
Encode and decode URLs instantly with the free URL encoder, 100% in your browser.