URL Encoder & Decoder — Percent Encoding
Percent-encode a full URL or a single component. These are different operations with different reserved sets, and choosing wrongly is the most common URL bug there is.
Paste your text or URL here, or drag a file…
Drag & drop a file, or paste content above
Output will appear here
Component or full URL — the distinction that matters
JavaScript exposes both as separate functions for a reason. Using the wrong one either breaks the URL structure or fails to escape data that then breaks it.
| encodeURI | encodeURIComponent | |
|---|---|---|
| Purpose | Make an assembled URL transmittable | Escape one value going into a URL |
| Leaves unescaped | : / ? # [ ] @ ! $ & ' ( ) * + , ; = plus unreserved | Only A–Z a–z 0–9 - _ . ! ~ * ' ( ) |
Encodes & | No | Yes → %26 |
Encodes / | No | Yes → %2F |
Encodes ? | No | Yes → %3F |
| Encodes space | Yes → %20 | Yes → %20 |
| Use for | A complete URL you built and want to make safe | A query value, path segment, or fragment |
When in doubt, you almost certainly want component encoding. A search term containing & encoded with encodeURI silently splits into two query parameters and the second half of the search disappears.
URL encoding bugs
A query value is truncated at the first & or #
Cause:The value was not component-encoded. A raw & starts a new parameter and a raw # starts the fragment, so everything after it is parsed as structure rather than data.
Fix:Use encodeURIComponent on the value, or build the URL with URLSearchParams, which does it for you.
A plus sign in a value becomes a space
Cause:The application/x-www-form-urlencoded format encodes space as +, and many server frameworks decode query strings with those rules. A literal + is then read as a space.
Fix:Encode a literal plus as %2B. This bites hardest on phone numbers in E.164 form (+447700900000) and on base64 values in query strings — use base64url there instead.
Double encoding — %2520 appears in the URL
Cause:The value was encoded twice. %20 became %2520 because the % itself was re-encoded to %25 on the second pass.
Fix:Encode exactly once, at the point where the value is inserted. This usually happens when a helper already encodes and the caller encodes again defensively.
Non-ASCII characters in a domain name fail
Cause:Domains do not use percent-encoding. Internationalised domain names use Punycode, a completely different scheme — münchen.de becomes xn--mnchen-3ya.de.
Fix:Percent-encode the path and query; convert the host with a Punycode library. Applying percent-encoding to a hostname produces an invalid URL.
An encoded slash in a path segment returns 404
Cause:Some servers and proxies decode %2F back to / before routing, splitting one path segment into two. Apache blocks it by default via AllowEncodedSlashes.
Fix:Avoid putting values containing slashes in path segments. Use a query parameter, or base64url-encode the value first.
Building URLs correctly
const params = new URLSearchParams({
q: 'cats & dogs',
page: '2'
});
`/search?${params}`; // /search?q=cats+%26+dogs&page=2
// Note URLSearchParams uses + for space (form encoding).
// That is correct for query strings and decodes properly.
// Full URL construction
const url = new URL('https://example.com/search');
url.searchParams.set('q', 'cats & dogs');
url.toString();from urllib.parse import quote, quote_plus, urlencode
quote('a/b c') # 'a/b%20c' — keeps / by default
quote('a/b c', safe='') # 'a%2Fb%20c' — component encoding
quote_plus('cats & dogs') # 'cats+%26+dogs'
urlencode({'q': 'cats & dogs', 'page': 2})About
The URL Encoder / Decoder uses the browser-native encodeURIComponent function to convert any string to URL-safe percent-encoded format — spaces become %20, ampersands become %26, and non-ASCII characters are encoded as UTF-8 byte sequences. The decoder reverses all percent-encoded sequences back to their original characters using decodeURIComponent. This is essential for safely embedding values in query strings, path segments, or form submissions. Everything runs in your browser — no network requests, no sign-up required.
How to use
- 1 Paste the string you want to encode or decode into the input.
- 2 Select Encode to percent-encode it, or Decode to reverse it.
- 3 Use the copy button to copy the result.
- What characters get percent-encoded in a URL?
- Any character that is not an unreserved character (A–Z, a–z, 0–9, -, _, ., ~) gets replaced with a % followed by its two-digit hexadecimal code. For example, a space becomes %20, an ampersand becomes %26, and a forward slash becomes %2F.
- What is the difference between encodeURI and encodeURIComponent?
- encodeURI encodes a complete URL and leaves reserved characters like /, ?, #, and & intact because they have structural meaning in URLs. encodeURIComponent encodes a single component (e.g. a query parameter value) and also encodes those reserved characters, which is necessary when the value itself contains them.
- When do I need to URL-encode a string?
- You need to URL-encode any value placed in a query string, path segment, or form submission that contains spaces, special characters, or non-ASCII text. For example, a search query like "hello world" must be encoded as "hello%20world" before it can be safely appended to a URL.
More in Encoders & Decoders
See all encoders & decoders.