URL Encoder/Decoder Guide: Safely Pass Data in URLs

URLs can only contain a limited set of characters. When you need to include data that contains spaces, ampersands, equals signs, or non-ASCII characters in a URL, those characters must be encoded. Failing to encode them correctly leads to broken links, malformed query strings, and subtle bugs that can be infuriating to trace.

This guide explains why URL encoding exists, which characters must be encoded, the difference between percent-encoding and form encoding, how to use JavaScript's encoding functions correctly, and the common mistakes that trip up developers.

Why URL Encoding Exists

URLs are defined by the RFC 3986 specification, which specifies that a URL may only contain a specific set of "unreserved" characters without encoding: uppercase and lowercase letters (A-Z, a-z), digits (0-9), and four symbols: -, _, ., and ~.

Other characters either have special structural meaning in a URL (like / for path separators, ? for the query string start, & for parameter separators, = for key-value pairs, and # for fragment identifiers) or simply cannot be reliably transmitted in a URL as-is.

When you need to include a character that has special meaning — or any character outside the safe set — you must percent-encode it: replace it with a % followed by the character's two-digit hexadecimal code.

How Percent-Encoding Works

Each character to be encoded is represented as %XX where XX is the hexadecimal value of the character's byte. For ASCII characters this is straightforward. For multi-byte Unicode characters, the UTF-8 encoding of the character is used, and each byte is percent-encoded separately.

For example:

• Space becomes %20
• Ampersand & becomes %26
• Equals sign = becomes %3D
• Plus sign + becomes %2B
• Hash # becomes %23
• Forward slash / becomes %2F
• Question mark ? becomes %3F

Common URL-Encoded Characters Reference

A Worked Example

Suppose you want to build a search URL that passes this query string as a parameter value:

coffee & tea prices

Unencoded (broken) URL:

https://example.com/search?q=coffee & tea prices&category=drinks

The ampersands and spaces will be interpreted as URL structure, not as part of the query value. The server will receive garbled parameters.

Correctly encoded URL:

https://example.com/search?q=coffee%20%26%20tea%20prices&category=drinks

Now the q parameter correctly contains the full string coffee & tea prices, and the structural & between parameters is preserved correctly.

Percent-Encoding vs. application/x-www-form-urlencoded

There are two different encoding schemes you will encounter, and they differ in one key way: how they handle spaces.

Percent-encoding (RFC 3986): Spaces are encoded as %20. This is the standard for URLs in general.

application/x-www-form-urlencoded: Spaces are encoded as + (a plus sign). This is the encoding used when HTML forms are submitted with method GET or POST and the default content type. When a server receives a + in a query string parameter, it decodes it as a space.

These two schemes are compatible in most cases, but mixing them can cause issues. If a value legitimately contains a + character, form encoding must encode it as %2B to distinguish it from a space. Use %20 in URLs that you construct manually to avoid any ambiguity.

encodeURI vs. encodeURIComponent in JavaScript

JavaScript provides two built-in functions for URL encoding, and choosing the wrong one is a very common mistake.

encodeURI()

encodeURI() encodes a complete URL. It preserves characters that have structural meaning in a URL — :, /, ?, #, &, =, and others — because removing these would break the URL structure.

encodeURI('https://example.com/search?q=coffee & tea')
// Returns: 'https://example.com/search?q=coffee%20&%20tea'
// Problem: & is NOT encoded, so it still acts as a separator!

encodeURIComponent()

encodeURIComponent() encodes a URL component — a single value that will be placed inside a URL. It encodes everything except unreserved characters (letters, digits, -, _, ., ~), including the structural characters that encodeURI preserves.

encodeURIComponent('coffee & tea')
// Returns: 'coffee%20%26%20tea'
// Correct: & is encoded so it won't be misread as a parameter separator

// Build a URL correctly:
const query = encodeURIComponent('coffee & tea');
const url = `https://example.com/search?q=${query}&category=drinks`;
// Result: https://example.com/search?q=coffee%20%26%20tea&category=drinks

The rule is simple: use encodeURIComponent() when encoding individual parameter values. Only use encodeURI() if you have a complete URL that already has correct structure and you just want to handle non-ASCII characters.

How to Use the URL Encoder/Decoder Tool

1. Open the URL Encoder/Decoder tool.
2. To encode: paste your text (a parameter value, a path segment, or a full URL) into the input area and click Encode. Special characters are converted to percent-encoded sequences.
3. To decode: paste the encoded URL or string and click Decode. Percent-encoded sequences are converted back to their original characters.
4. Copy the output for use in your code, browser, or API request.

Common Mistakes to Avoid

Encoding the Entire URL When You Should Only Encode Parameters

The most frequent mistake is passing a full URL through an encoder, which turns https:// into https%3A%2F%2F and makes the URL completely invalid. Only encode the values of your query parameters, not the structural parts of the URL like the scheme, domain, path separators, and parameter delimiters.

Double-Encoding

If a value has already been encoded and you encode it again, %20 becomes %2520 — because the % character itself gets encoded to %25. Double-encoded URLs cause the server to receive the literal string %20 instead of a space. Always decode before re-encoding if you are unsure of the current state of a string.

Not Encoding When Building URLs in Code

When constructing URLs by concatenating strings in code, always encode each parameter value with encodeURIComponent() before appending it. If you concatenate raw user input directly into a URL string, any special characters in that input will break the URL structure.

Confusion Between + and %20 for Spaces

A + in a URL query string usually means a space in form-encoded values. A + in a URL path segment is a literal plus sign. To avoid any ambiguity, use %20 when you want an unambiguous space, and use %2B when you want a literal plus sign in a query parameter value.

Summary

URL encoding converts characters that would be misinterpreted in a URL into percent-encoded %XX sequences. Always use encodeURIComponent() in JavaScript when encoding individual parameter values — not encodeURI(), which preserves structural characters and is therefore wrong for encoding values. The two most common mistakes are encoding the whole URL instead of just the parameter values, and double-encoding already-encoded strings. The URL encoder/decoder tool above handles both directions instantly, making it easy to debug URL issues or prepare values for API requests and links.