URL Encode in JavaScript
How to URL-encode and decode strings in JavaScript with encodeURIComponent, encodeURI, and URLSearchParams.
Open URL Encoder →Encoding URLs in JavaScript
JavaScript has built-in functions for URL encoding — no library needed.
encodeURIComponent() encodes a single value (a query parameter or path segment) and is what you want most of the time. encodeURI() encodes a whole URL while preserving its structure. For building query strings, the URLSearchParams API is the cleanest option: it encodes every key and value automatically, so you never hand-concatenate. All three handle Unicode by encoding characters as UTF-8 bytes, so emoji and accented letters work out of the box.The Three Approaches
encodeURIComponent(value)— encode one parameter or path piece. Most common.URLSearchParams— build a whole query string safely;params.toString()handles all encoding (spaces become+).encodeURI(url)— make an already-built URL valid without re-encoding its structure.- Decode with
decodeURIComponent()anddecodeURI(). - Tip: never build URLs with plain string concatenation of untrusted input — always encode each value.
// Single value
encodeURIComponent("Tom & Jerry");
// "Tom%20%26%20Jerry"
// Build a query string
const params = new URLSearchParams({ q: "Tom & Jerry", page: 2 });
const url = `https://api.test/search?${params}`;
// "...?q=Tom+%26+Jerry&page=2"
// Full URL with a space
encodeURI("https://test.com/my file.pdf");
// "https://test.com/my%20file.pdf"
// Decode
decodeURIComponent("Tom%20%26%20Jerry"); // "Tom & Jerry"