Double Encoding
This happens when you encode a value that was already encoded — usually when storing and re-using a value from a previous URL. The % character itself gets encoded to %25, turning %20 into %2520. The server then decodes it to %20 instead of a space.
// Input is already encoded: "hello%20world"
const url = '/search?q=' + encodeURIComponent(alreadyEncoded);
// → "/search?q=hello%2520world" ✗ % became %25// Decode first if the value might already be encoded
const url = '/search?q=' + encodeURIComponent(decodeURIComponent(value));Using encodeURIComponent on a Full URL
encodeURIComponent encodes everything including : and /, which destroys the URL structure. Use encodeURI for full URLs, and encodeURIComponent only for individual query values.
// Encodes the whole URL including :// and /
const link = encodeURIComponent("https://example.com/path?q=hello");
// → "https%3A%2F%2Fexample.com%2Fpath%3Fq%3Dhello" ✗ Broken// encodeURI preserves URL structure
const link = encodeURI("https://example.com/path?q=hello world");
// → "https://example.com/path?q=hello%20world" ✓Not Encoding User Input in Query Strings
Any user-provided value going into a URL must be encoded. The & character is a query string delimiter — if unencoded, the server will split your single parameter into multiple ones.
// User types: "coffee & tea"
const url = '/search?q=' + userInput;
// → "/search?q=coffee & tea"
// Server may parse & as a parameter separator ✗const url = '/search?q=' + encodeURIComponent(userInput);
// → "/search?q=coffee%20%26%20tea" ✓Mixing + and %20 for Spaces
HTML forms encode spaces as + (application/x-www-form-urlencoded). decodeURIComponent does not convert + back to a space — it only handles %20. Use URLSearchParams to safely parse form data.
// HTML form submits: "q=hello+world"
// Server using encodeURIComponent expects %20, not +
decodeURIComponent("hello+world")
// → "hello+world" ✗ + is not decoded as space// For form-encoded data, use URLSearchParams which handles + correctly
const params = new URLSearchParams(window.location.search);
const q = params.get('q'); // → "hello world" ✓Encoding Path Segments vs Query Values Differently
Path segments need encoding too, not just query values. encodeURIComponent is the right choice for individual path segments — it encodes / which would otherwise be interpreted as a path separator.
// Path segment NOT encoded — breaks on special chars
const path = '/user/' + username + '/profile';// Encode each path segment individually
const path = '/user/' + encodeURIComponent(username) + '/profile';
// username "john/doe" → "/user/john%2Fdoe/profile" ✓Debug URL encoding issues
Use our free tool to encode and decode any string and verify the output instantly.