JavaScript URL Encoder & Decoder
Encode and decode URLs for JavaScript. Test encoding instantly, then use the code examples for browser fetch(), Node.js, and URL construction. Everything runs in your browser.
URL Encoder & Decoder
Encode and decode URL components or full URIs. Fast, private, and free.
Quick Reference
Component mode uses encodeURIComponent / decodeURIComponent — encodes everything except A-Z a-z 0-9 - _ . ~ ! * ' ( ). Best for query parameter values and path segments.
Full URI mode uses encodeURI / decodeURI — preserves URL structure characters like : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Best for encoding an entire URL while keeping its structure intact.
How to URL encode in JavaScript
JavaScript provides two encoding functions: encodeURIComponent('hello world') returns 'hello%20world' — encodes everything except A-Z, a-z, 0-9, -, _, ., ~. Use this for query parameter values. encodeURI('https://example.com/path with spaces') preserves the URL structure (://?#& are not encoded). For query strings: new URLSearchParams({ q: 'hello world', page: '1' }).toString() returns 'q=hello+world&page=1'. The URL class handles encoding automatically: new URL('https://example.com/search?q=' + encodeURIComponent(query)).
URL encoding with fetch() and Axios
With fetch(): const params = new URLSearchParams({ q: query }); fetch(`/api/search?${params}`). With Axios: axios.get('/search', { params: { q: query } }) — encoding is automatic. For POST form data: fetch('/api', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams({ name: 'John', email: 'john@example.com' }) }). Never manually concatenate user input into URLs — always use URLSearchParams or encodeURIComponent to prevent injection.
Common JavaScript URL encoding mistakes
Mistake 1: Using encodeURI() instead of encodeURIComponent() for query values — encodeURI() doesn't encode &, =, +, so 'a&b=c' would break query parsing. Mistake 2: Double encoding — encoding an already-encoded string turns %20 into %2520. Check with decodeURIComponent() first. Mistake 3: Not handling the + character — URLSearchParams encodes spaces as +, but some APIs expect %20. Force %20 with: new URLSearchParams(params).toString().replace(/\+/g, '%20'). Mistake 4: Forgetting that encodeURIComponent() doesn't encode ' (single quote) — manually replace if needed for SQL or HTML contexts.
Frequently Asked Questions
What is the difference between encodeURI() and encodeURIComponent()?
encodeURI() encodes a complete URL, preserving :, /, ?, #, &, =. encodeURIComponent() encodes individual values, including those characters. Rule: use encodeURIComponent() for query parameter values; use encodeURI() only for complete URLs where the structure should be preserved.
How do I build a URL with query parameters in JavaScript?
Best approach: const url = new URL('https://api.example.com/search'); url.searchParams.set('q', 'hello world'); url.searchParams.set('page', '1'); fetch(url). The URL class handles all encoding automatically and is available in browsers and Node.js 10+.
How do I decode a URL string in JavaScript?
Use decodeURIComponent('hello%20world') for individual values, or decodeURI() for complete URLs. For query strings: Object.fromEntries(new URLSearchParams('a=1&b=hello%20world')) returns { a: '1', b: 'hello world' }.