Learn how to URL encode and decode strings with precision. Discover the difference between encodeURI and encodeURIComponent, solve the '+' vs '%20' mystery and prevent URL injection.
You are constructing an API request with a search query containing spaces and ampersands. You are reading a server log and see %7B%22user%22%3A%224821%22%7D. You are building a redirect URL that contains another URL inside it as a parameter.
In all these situations, URL Encoding is either your best friend or your worst enemy.
URLs are the DNA of the web, but they have strict rules. If you put a "Space" or an "Ampersand" in the wrong place, the entire connection breaks. That is where Percent Encoding comes in-it is the process of translating "Illegal" characters into a format that the internet can safely transport.
Our URL Encoder/Decoder is designed to handle this translation instantly. In this guide, we dive into the RFC standards, the security risks and the subtle bugs that haunt even senior developers.
1. What is URL Encoding? (The %XX Math)
A URL can only contain a small set of "Safe" characters (letters, numbers and a few symbols like - and _). Everything else-including spaces, emojis and non-English characters-must be "Encoded."
The Process: The computer takes the character, finds its hexadecimal value in UTF-8 and prefixes it with a %.
- Space becomes
%20. - & (Ampersand) becomes
%26. - ! (Exclamation mark) becomes
%21.
When your browser sees %20, it knows to display a "Space" to the human. Without this, the server would think the URL ended when it hit the space, leading to a 404 or a broken request.
2. The Great War: '+' versus '%20'
If you look at the URL in your browser after a Google search, you will see spaces replaced by a + sign. But if you look at a JSON API call, you will see %20. Why the difference?
+(The Legacy): This is used in "Application/x-www-form-urlencoded" data. It is the old way that HTML forms sent data to servers.%20(The Standard): This is "Percent Encoding" (RFC 3986). It is the modern, unambiguous way to represent a space.
Pro Rule: When in doubt, use %20. It works everywhere. Use our URL Encoder to ensure you are getting the standard %20 output for your APIs.
3. encodeURI vs. encodeURIComponent: The #1 JS Bug
JavaScript provides two ways to encode. Choosing the wrong one is the most common mistake in frontend development.
encodeURI(): Use this for a Full URL. It assumes that characters like:,/,?and&are intentional structure and will not encode them.encodeURIComponent(): Use this for a Single Parameter. It assumes that anything you pass it is data. It will encode:,/and&.
The Bug: If you use encodeURIComponent on a full URL, it will turn https:// into https%3A%2F%2F, making the link unclickable. If you use encodeURI on a search query that contains an &, the server will think you are starting a new parameter.
4. URL-in-URL: The "Matryoshka" Problem
What happens if you want to pass a URL as a parameter inside another URL? This happens in OAuth, SSO (Single Sign-On) and "Next Page" redirects.
The Solution: You must encode the "Inner" URL.
If your redirect target is https://site.com?id=1&user=a, you must encode it before appending it to your login link. If you don't, the &user=a part will be seen as a parameter for the login page, not the redirect page.
Our URL Encoder makes this easy: paste the target URL, hit encode and you have a safe string to drop into your redirect logic.
5. Security: The "Open Redirect" Vulnerability
URL Encoding is a security tool, but if mismanaged, it can be a weapon.
An "Open Redirect" happens when an app takes a URL parameter (like ?next=/dashboard) and redirects the user without checking the domain. A hacker can send a link like mysite.com/login?next=https://malicious-site.com.
Always "Sanitize" and "Validate" your decoded URLs. Just because a string looks safe in the URL doesn't mean the destination is safe.
6. Unicode and Emojis: Encoding the Modern Web
URLs were originally built for the English alphabet (ASCII). Today, they have to support everything from Hindi script to the 🚀 emoji.
Emojis are transformed into a sequence of multiple % codes. For example, 🚀 becomes %F0%9F%9A%80. Our tool handles UTF-8 encoding natively, ensuring your internationalized URLs work across all global regions.
7. Fragment Identifiers: The '#' Mystery
The "Hash" (#) in a URL is unique. Everything after the # is called a "Fragment Identifier" and it is never sent to the server. It is strictly for the browser to scroll the page or manage state in a Single Page App (SPA).
If you are building an API call, never put data after a #. Use a ? for query parameters instead.
8. The "Double Encoding" Nightmare
Sometimes, a developer encodes a string and then another part of the app encodes it again.
%20 (Space) becomes %2520 (because % is encoded to %25).
If your data looks like "Alphabet Soup" with lots of 25s in it, you have a double-encoding bug. Use our URL Decoder to "Peel Back" the layers-if you have to decode twice to see the original text, you found your bug.
9. API Design: Best Practices
For a clean API, try to avoid special characters in your keys and values where possible.
- Good:
mysite.com/api/users/john_doe - Bad:
mysite.com/api/users/John Doe & Sons!
The more encoding you require, the more places things can go wrong. Stick to "Unreserved" characters (-, _, ., ~) for the most robust systems.
10. Conclusion: Navigating the Digital Map
Every click you make on the internet is backed by the invisible work of URL Encoding. It is the map that tells the browser how to find data, how to relay messages and how to stay secure.
Whether you are debugging a broken "Share" link or inspecting a suspicious log file, understanding the logic behind the % sign is a core developer skill.
Master your navigation today. Encode, decode and verify your links with the URL Encoder/Decoder.
