The Four Built-in Functions
JavaScript has four URL encoding/decoding functions built into every environment:
| Function | Purpose |
|---|---|
| {fn} | {desc} |
| {fn} | {desc} |
| {fn} | {desc} |
| {fn} | {desc} |
encodeURI(): For Complete URLs
Use encodeURI() when you have a full URL and just want to make it safe for transmission. It encodes everything except characters that are legal in a URL:
// Safe characters NOT encoded by encodeURI:
A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
encodeURI("https://example.com/search?q=hello world&lang=en")
// → "https://example.com/search?q=hello%20world&lang=en"
// Note: & is NOT encoded — it keeps the query string workingThe key insight: encodeURI() trusts that the string you give it is already a structurally valid URL. It just makes it safe to put on the wire.
encodeURIComponent(): For Values Inside URLs
Use encodeURIComponent() when encoding a piece of data that will go inside a URL — like a query parameter value, a path segment, or a hash fragment. It encodes everything except unreserved characters:
// Only these are NOT encoded:
A-Z a-z 0-9 - _ . ! ~ * ' ( )
const search = "café & co";
const url = "https://api.example.com/search?q=" + encodeURIComponent(search);
// → "https://api.example.com/search?q=caf%C3%A9%20%26%20co"
// Note: & IS encoded as %26 — prevents it breaking the query stringThis is the function you'll use most often. Any time a user types something that will go into a URL, run it through encodeURIComponent().
Building Query Strings Correctly
A common task is building URLs with multiple query parameters from an object:
// ✗ Wrong — values not encoded
function buildUrl(base, params) {
const query = Object.entries(params)
.map(([k, v]) => k + '=' + v)
.join('&');
return base + '?' + query;
}
// ✓ Correct — both keys and values encoded
function buildUrl(base, params) {
const query = Object.entries(params)
.map(([k, v]) => encodeURIComponent(k) + '=' + encodeURIComponent(v))
.join('&');
return base + '?' + query;
}
// ✓ Even better — use the native URLSearchParams API
const params = new URLSearchParams({ q: 'hello & world', page: '2' });
const url = 'https://api.example.com/search?' + params.toString();
// → "https://api.example.com/search?q=hello+%26+world&page=2"Note: URLSearchParams uses + for spaces (application/x-www-form-urlencoded) instead of %20. Both are correct for query strings — most servers handle both.
Decoding URL-Encoded Strings
// Decode a complete URL
decodeURI("https://example.com/path%20with%20spaces")
// → "https://example.com/path with spaces"
// Decode a query value
decodeURIComponent("hello%20%26%20world")
// → "hello & world"
// Decode URL search params automatically
const params = new URLSearchParams("q=hello%20world&page=2");
params.get("q"); // → "hello world"Test it yourself
Use our free URL Encoder/Decoder to test any string instantly.