URL Encoder/Decoder
Encode or decode URLs and query parameters online. Supports both encodeURIComponent (for parameters) and encodeURI (for full URLs).
How to Use the URL Encoder/Decoder
- To Encode: Paste your text or URL into the input field and select your encoding mode. Use encodeURIComponent for query parameter values or encodeURI for full URLs.
- To Decode: Switch to the Decode tab, paste your percent-encoded string, and click Decode to see the original text.
- Click Copy to copy the result to your clipboard instantly.
About URL Encoding
URL encoding, also known as percent encoding, is a mechanism for encoding information in a Uniform Resource Identifier (URI). URLs can only contain a limited set of characters from the ASCII character set. Characters outside this set, or characters that have special meaning in URLs (like &, =, ?, and #), must be encoded using a percent sign followed by two hexadecimal digits representing the character's ASCII value.
There are two common encoding functions in JavaScript: encodeURIComponent encodes a string for use as a URI component (such as a query parameter value), encoding almost all special characters. encodeURI encodes a complete URI but preserves characters that are valid in URLs such as colons, slashes, question marks, and hash symbols. Choosing the right function depends on whether you are encoding a full URL or just a parameter value within one.
Common URL Encoding Examples
These examples show how URL encoding works in typical web development scenarios. Understanding these patterns helps you build correct URLs and debug encoding issues.
Query String Parameters
Original: ?search=hello world&category=books & media Encoded: ?search=hello%20world&category=books%20%26%20media
File Paths with Spaces
Original: /documents/my report (final).pdf Encoded: /documents/my%20report%20(final).pdf
International Characters
Original: ?city=Munchen&name=Rene Encoded: ?city=M%C3%BCnchen&name=Ren%C3%A9
JSON in a URL Parameter
Original: ?filter={"status":"active","page":1}
Encoded: ?filter=%7B%22status%22%3A%22active%22%2C%22page%22%3A1%7D
Redirect URLs
Original: ?redirect=https://example.com/page?id=5&ref=home Encoded: ?redirect=https%3A%2F%2Fexample.com%2Fpage%3Fid%3D5%26ref%3Dhome
URL Encoding Quick Reference
The following table shows reserved and special characters and their percent-encoded equivalents. These characters have special meaning in URLs and must be encoded when used as data rather than as delimiters.
| Character | Encoded | Purpose in URLs |
|---|---|---|
| (space) | %20 | Not allowed in URLs |
| ! | %21 | Sub-delimiter |
| # | %23 | Fragment identifier |
| & | %26 | Query parameter separator |
| = | %3D | Key-value separator |
| ? | %3F | Query string start |
| / | %2F | Path separator |
| : | %3A | Scheme separator (http:) |
| @ | %40 | User info separator |
| + | %2B | Space in form data |
encodeURI vs. encodeURIComponent
| Function | Encodes | Preserves | Use For |
|---|---|---|---|
encodeURI | Spaces, non-ASCII | : / ? # [ ] @ ! $ & ' ( ) * + , ; = | Complete URLs |
encodeURIComponent | All except A-Z a-z 0-9 - _ . ~ ! * ' ( ) | Letters, digits, a few symbols | Query parameter values |
Why URL Encoding Is Necessary
URLs are defined by RFC 3986 as a sequence of characters from a limited subset of ASCII. This restriction exists because URLs must travel reliably across networks, email systems, HTML documents, and software that may interpret certain characters differently. Characters outside the permitted set, or characters that serve as delimiters (like ?, &, and =), must be percent-encoded when they appear as data rather than structural elements.
The encoding process converts each byte of the character into a percent sign followed by two hexadecimal digits. For multi-byte UTF-8 characters, each byte is encoded separately. For example, the Chinese character for "middle" is encoded as %E4%B8%AD because it consists of three UTF-8 bytes: E4, B8, and AD. This mechanism allows URLs to safely contain text in any language while remaining compatible with systems that only understand ASCII.
Failing to URL encode can cause subtle and hard-to-debug problems. A search query containing an ampersand will be split into two separate parameters. A file name with spaces will be truncated. A redirect URL passed as a parameter will be misinterpreted if its internal delimiters are not encoded. Using the correct encoding function for the context (full URL vs. parameter value) is essential for building reliable web applications.
Frequently Asked Questions
URL encoding (also called percent encoding) replaces special characters in a URL with a percent sign followed by two hexadecimal digits. For example, a space becomes %20. This ensures URLs are valid and transmit correctly across the internet.
encodeURI encodes a complete URL but preserves characters that are valid in URLs (like :, /, ?, #, &). encodeURIComponent encodes everything except letters, digits, and a few special characters, making it suitable for encoding individual query parameter values.
You should URL encode whenever you include user-supplied data in a URL, especially in query string parameters. This prevents special characters from breaking the URL structure and ensures proper data transmission.
Spaces are not allowed in URLs per the URI specification (RFC 3986). The percent-encoding scheme replaces each unsafe byte with a percent sign followed by two hexadecimal digits. The ASCII value of a space is 32, which is 20 in hexadecimal, so a space becomes %20.
Both represent spaces, but in different contexts. %20 is the standard URL encoding for a space and works everywhere in a URL. The + symbol represents a space only in application/x-www-form-urlencoded data (HTML form submissions). In modern web development, %20 is preferred for consistency.
Yes. Non-ASCII characters like accented letters, Chinese characters, or emojis must be encoded in URLs. They are first converted to their UTF-8 byte sequence, then each byte is percent-encoded. This ensures the URL remains valid and transfers correctly across all systems.
You should not encode the entire URL with encodeURIComponent, as it would encode the colons, slashes, and other structural characters. Use encodeURI for full URLs (preserves structural characters) and encodeURIComponent only for individual parameter values.