URL Encoder & Decoder β Free Online Tool
Encode and decode URLs instantly. Handle special characters, query parameters, and Unicode with encodeURIComponent, encodeURI, or query string encoding. Parse full URLs into their component parts β 100% client-side, nothing ever leaves your browser.
Encode / Decode
Quick test β click a character to insert it:
Output
URL Parser
What is URL Encoding?
URL encoding, formally known as percent-encoding, is a way to represent characters that are not allowed or have special meaning in a Uniform Resource Locator (URL). The mechanism replaces unsafe or reserved characters with a percent sign (%) followed by two uppercase hexadecimal digits representing the character's UTF-8 byte value. For example, a space character (ASCII 32 / 0x20) becomes %20, and an ampersand (&) becomes %26.
URLs are restricted to a subset of printable ASCII characters. Any character outside that safe set β including Unicode characters like emoji and non-Latin scripts, characters with special meaning in URL syntax (such as ?, #, /, and =), and invisible control characters β must be encoded before being embedded in a URL. Failure to encode these characters can result in malformed URLs, broken links, security vulnerabilities, or server-side parsing errors.
Percent-encoding is defined in RFC 3986 (URI syntax) and is used everywhere HTTP requests are made: query strings, form submissions, path segments, and HTTP headers that carry URL values.
encodeURI vs encodeURIComponent
JavaScript provides two built-in functions for URL encoding, and choosing the right one matters for correctness:
| Function | Purpose | Characters NOT encoded |
|---|---|---|
| encodeURI() | Encode a complete, structurally valid URL | A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) # |
| encodeURIComponent() | Encode a single URL component (e.g. a query value) | A-Z a-z 0-9 - _ . ! ~ * ' ( ) |
| decodeURI() | Reverse of encodeURI | Does not decode characters encodeURI would not encode |
| decodeURIComponent() | Reverse of encodeURIComponent | Decodes all percent-encoded sequences |
The rule of thumb: use encodeURIComponent for values you are inserting into a URL (query parameter names and values, path segments that contain user data). Use encodeURI only when you already have a complete, structurally correct URL and simply want to ensure it is safe for transmission (e.g., before passing it to fetch() or an anchor tag). Using encodeURIComponent on a full URL will break it by encoding the slashes and colons in the protocol and host.
Common Characters That Need URL Encoding
| Char | Encoded Form | Why it needs encoding |
|---|---|---|
| space | %20 (or + in query strings) | Spaces are not allowed anywhere in a URL |
| & | %26 | Delimiter between query parameters; must be encoded in values |
| = | %3D | Separates parameter name from value; must be encoded in values |
| ? | %3F | Introduces the query string; must be encoded in path segments and values |
| # | %23 | Introduces a fragment; everything after # is not sent to the server |
| / | %2F | Path separator; encode when / is part of a value, not a path delimiter |
| + | %2B | Means "space" in form-encoded query strings; encode the literal + with %2B |
| @ | %40 | Used in authority (userinfo@host); encode in path/query values |
| % | %25 | The escape character itself; a literal % must be encoded as %25 |
| " | %22 | Unsafe character that can break HTML attribute quoting |
| π (U+1F680) | %F0%9F%9A%80 | Non-ASCII Unicode is UTF-8 encoded then percent-encoded |
| δΈ (U+4E2D) | %E4%B8%AD | CJK characters encode to three UTF-8 bytes each |
Frequently Asked Questions
What is URL encoding?
URL encoding (percent-encoding) converts special and non-ASCII characters in a URL to a safe format by replacing each character with a % followed by two hexadecimal digits representing its UTF-8 byte value. This ensures URLs contain only characters from the allowed ASCII subset defined in RFC 3986, preventing parsing errors and ambiguity.
What is the difference between encodeURI and encodeURIComponent?
encodeURI is for complete URLs β it leaves structural characters like ://, /, ?, &, and = unencoded because they are part of the URL structure. encodeURIComponent is for individual values (like query parameter values) β it encodes those structural characters too, so that the value cannot break the URL structure it is embedded in. Always use encodeURIComponent when inserting user-provided data into a URL.
What is the difference between %20 and + for spaces in URLs?
%20 is the universally correct percent-encoding of a space and is valid in any part of a URL. The + sign represents a space only within the query string and only when the content type is application/x-www-form-urlencoded (the default for HTML form submissions). In a URL path, + is a literal plus sign, not a space. For maximum compatibility and clarity, prefer %20 over + when encoding spaces in URLs that are constructed programmatically.
How are Unicode characters encoded in URLs?
Unicode characters are not directly percent-encoded from their Unicode code point. Instead, the character is first converted to its UTF-8 byte sequence, and then each byte is percent-encoded individually. For example, the emoji π (U+1F680) has the UTF-8 representation F0 9F 9A 80, which encodes to %F0%9F%9A%80. JavaScript's encodeURIComponent handles this automatically, making it the safest option for encoding any user input that may contain non-ASCII characters.
Related Developer Tools
- Base64 Encoder & Decoder β encode and decode Base64 strings for data URIs and API payloads
- JSON Formatter & Validator β pretty-print and validate JSON with syntax highlighting
- CORS Error Debugger β diagnose cross-origin errors and get fix code for Express, Nginx, Apache
- HTTP Status Code Reference β look up every HTTP status code with explanations and examples