URL Encoder and Decoder

What is URL Encoding?

URL encoding, also known as percent-encoding, is a mechanism for encoding information in a Uniform Resource Identifier (URI) under certain circumstances. URLs can only be sent over the Internet using the ASCII character set, which is limited to alphanumeric characters and specific symbols. To safely transmit characters outside this set, URL encoding replaces unsafe ASCII characters with a "%" followed by two hexadecimal digits representing the character's UTF-8 encoding.

Characters That Need Encoding

The following types of characters should generally be encoded in URLs:

• Reserved Characters: These have special meanings in URLs and should be encoded when used in a different context: : / ? # [ ] @ ! $ & ' ( ) * + , ; =
• Unsafe Characters: These are characters that might be altered or lost during transmission: space " % < > \\ ^ ` {{ | } ~
• Non-ASCII Characters: Any character outside the ASCII character set (like é, ñ, 漢, etc.) needs to be encoded.

URL Structure and Encoding Rules

A URL consists of several components, each with slightly different encoding rules:

• Scheme and Domain: These rarely need encoding as they use a limited character set.
• Path: Path segments should encode characters like spaces, ?, #, etc.
• Query String: Most special characters should be encoded. Spaces can be encoded as %20 or + (plus sign).
• Fragment: Similar to paths, most non-alphanumeric characters should be encoded.

encodeURI vs. encodeURIComponent

JavaScript provides two main functions for URL encoding, each with different purposes:

• encodeURI(): Used to encode a complete URL. It doesn't encode characters that are part of the URL syntax (like : / ? # [ ] @).
• encodeURIComponent(): Used to encode individual components of a URL, like query parameters. It encodes all characters that are not allowed in URL components, including : / ? # [ ] @.

Our tool provides options for both approaches, letting you choose the appropriate encoding method for your needs.

Space Encoding: %20 vs. +

There are two common ways to encode spaces in URLs:

• %20: This is the standard percent-encoding for a space character. It's used in most parts of a URL.
• + (plus sign): In query strings, spaces are often encoded as plus signs. This comes from the application/x-www-form-urlencoded format used in form submissions.

Both approaches are valid, but they're used in different contexts. Our tool gives you the option to choose between them when encoding URLs.

Encode at the Right Level

When building URLs, encode components individually rather than encoding the entire URL at once. This ensures that structural characters like /, ?, and & maintain their special meaning where needed:

const baseUrl = 'https://example.com/search';
const params = {
  query: 'red & blue',
  category: 'art supplies',
  sort: 'price:desc'
};

const queryString = Object.entries(params)
  .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
  .join('&');

const url = `${baseUrl}?${queryString}`;
// Result: https://example.com/search?query=red%20%26%20blue&category=art%20supplies&sort=price%3Adesc

Be Consistent with Space Encoding

Choose a consistent approach to encoding spaces. In query strings, spaces can be encoded as + or %20, but mixing the two can cause confusion:

• Use %20 for spaces in path segments and most contexts
• Use + for spaces in query parameters only if you're sure the receiving system expects this format
• Be consistent within the same URL or application

Handle Decoding Errors Gracefully

When decoding URLs, especially those from external sources, be prepared for malformed input:

• Implement error handling when decoding user-provided or external URLs
• Consider fallback approaches when decoding fails
• Check for partial encoding (e.g., where only some characters are encoded)
• Be cautious with double-decoding, which can lead to security vulnerabilities

Pay Special Attention to JSON in URLs

When embedding JSON data in URLs (e.g., in query parameters or fragments), encode the entire JSON string:

const filters = { color: 'blue', size: ['large', 'medium'], price: { min: 10, max: 50 } };
const jsonString = JSON.stringify(filters);
const encodedJson = encodeURIComponent(jsonString);

const url = `https://example.com/products?filters=${encodedJson}`;
// Result: https://example.com/products?filters=%7B%22color%22%3A%22blue%22%2C%22size%22%3A%5B%22large%22%2C%22medium%22%5D%2C%22price%22%3A%7B%22min%22%3A10%2C%22max%22%3A50%7D%7D

Test with Complex Characters

Always test your URL encoding/decoding with a variety of special cases:

• International characters from different scripts (Japanese, Arabic, Cyrillic, etc.)
• Special characters that have meaning in URLs (?, &, #, etc.)
• Emoji and other Unicode symbols
• Very long parameter values
• Characters that might be problematic in different encodings (€, ß, etc.)

Why do some characters not get encoded?

When using encodeURI(), certain characters like forward slashes (/) and colons (:) don't get encoded because they have special meaning in URLs as part of the structure. These characters are considered "reserved" and are only encoded when using encodeURIComponent(), which is designed for encoding individual parts of a URL rather than an entire URL. Our tool offers both options, allowing you to control which characters get encoded based on your specific needs.

Why are spaces sometimes encoded as + instead of %20?

The + sign as a space encoding originates from the application/x-www-form-urlencoded MIME type used in HTML form submissions. In this context, spaces are traditionally encoded as + signs rather than %20. Many web frameworks and servers automatically interpret + as spaces in query strings. However, in other parts of a URL like the path, spaces should be encoded as %20. Our tool gives you the option to encode spaces as + signs specifically for query string parameters.

Can URL encoding make my URLs shorter?

Generally, no. URL encoding almost always makes URLs longer, not shorter, because it replaces single characters with their percent-encoded equivalents (typically three characters: % followed by two hex digits). If you're looking to create shorter URLs, consider using a URL shortening service instead. URL encoding is about ensuring compatibility and correctness, not compression or brevity.

Is URL encoding the same as HTML encoding?

No, URL encoding and HTML encoding (or HTML entity encoding) serve different purposes and use different formats. URL encoding is used to encode characters in URLs to ensure they're transmitted correctly over the internet. HTML encoding is used to represent special characters in HTML documents to ensure they're displayed correctly in browsers rather than being interpreted as HTML markup. For example, a space is %20 in URL encoding but   or in HTML encoding.

Is it safe to decode a URL multiple times?

Decoding an already decoded URL or decoding a URL multiple times can lead to unexpected results or security vulnerabilities, especially in web applications. This issue, known as "double decoding," can sometimes bypass security filters. As a best practice, you should track whether a string has already been decoded and avoid repeated decoding operations. Our decoder attempts to handle this gracefully by identifying and properly decoding strings regardless of whether they've been partially decoded, but for security-critical applications, you should implement additional safeguards.