URL Encoder/Decoder
encode · decode · url components
$ how-to-use
Paste text with special characters and click Encode to get URL-safe output. Or paste an encoded URL string and click Decode to see the original text.
What is URL Encoding?
URLs can only contain a limited set of ASCII characters. Special characters like spaces, ampersands, question marks, and non-ASCII characters (accented letters, emoji, CJK) must be "percent-encoded" — replaced with a % followed by their hex value.
For example, a space becomes %20, an ampersand becomes %26, and the euro sign € becomes %E2%82%AC. Without proper encoding, URLs break or get misinterpreted by browsers and servers.
This tool uses JavaScript's encodeURIComponent() for encoding and decodeURIComponent() for decoding — the standard functions used in web development.
When You Need It
Query Parameters
Values in ?key=value pairs must be encoded. A search for "cats & dogs" becomes ?q=cats%20%26%20dogs.
API Requests
REST API parameters with special characters or non-English text need encoding to transmit correctly.
Redirect URLs
When passing a URL as a parameter (OAuth callbacks, tracking links), the inner URL must be fully encoded.
Debugging
Decode messy encoded URLs from logs or analytics to see what the original query or path was.
URL Encoding Reference Table
Common characters and their percent-encoded equivalents. Characters not in the unreserved set (A-Z, a-z, 0-9, -, _, ., ~) must be encoded when used in URL components.
| Character | Encoded | Description | Common Context |
|---|---|---|---|
| (space) | %20 | Space character | Search queries, file names |
| ! | %21 | Exclamation mark | Sentences in parameters |
| # | %23 | Hash / fragment | Color codes, anchors in params |
| $ | %24 | Dollar sign | Currency values |
| & | %26 | Ampersand | Critical — separates query params |
| + | %2B | Plus sign | Math expressions, phone numbers |
| / | %2F | Forward slash | Paths in parameter values |
| = | %3D | Equals sign | Values containing = (Base64, etc.) |
| ? | %3F | Question mark | URLs within parameter values |
| @ | %40 | At sign | Email addresses in params |
| % | %25 | Percent sign | Literal percent in values |
Understanding URL Encoding in JavaScript
JavaScript provides four functions for URL encoding, each with different behaviors. Understanding which to use prevents subtle bugs that are hard to debug in production.
encodeURIComponent()
Encodes everything except: A-Z a-z 0-9 - _ . ! ~ * ' ( )
Use for: Individual query parameter values, path segments. This is what you want 90% of the time.
encodeURI()
Preserves: : / ? # [ ] @ ! $ & ' ( ) * + , ; =
Use for: Complete URLs where you want to encode only non-ASCII characters (spaces, accented letters).
Double-Encoding Trap
If a value is already encoded (%20), encoding it again produces %2520. This is the most common URL encoding bug. Always decode first, then re-encode if needed — or track encoding state in your application.
URLSearchParams API
Modern JavaScript provides URLSearchParams which handles encoding automatically. Use new URLSearchParams({key: value}).toString() to build query strings without manual encoding.
FAQ
What's the difference between encodeURI and encodeURIComponent?
encodeURI encodes a full URL but leaves :, /, ?, # intact. encodeURIComponent encodes everything — use it for individual parameter values. This tool uses encodeURIComponent.
Is my data private?
Yes. All encoding/decoding happens in your browser. Nothing is sent to any server.