URL Encode/Decode: A Developer's Guide to Percent-Encoding

URLs can only contain a limited set of characters from the ASCII character set. When you need to include special characters like spaces, ampersands, or non-ASCII characters in a URL, they must be percent-encoded — replaced with a % followed by two hexadecimal digits representing the character’s byte value.

What is URL Encoding?

URL encoding (also called percent-encoding) converts characters that aren’t allowed in URLs into a safe format. For example:

• Space becomes %20
• & becomes %26
• = becomes %3D
• ? becomes %3F

This encoding ensures that URLs are transmitted correctly across the internet, regardless of what characters they contain.

encodeURIComponent vs encodeURI

JavaScript provides two functions for URL encoding, and choosing the wrong one is a common source of bugs:

encodeURIComponent

Encodes everything except: A-Z a-z 0-9 - _ . ! ~ * ' ( )

Use this when encoding individual values that will be placed into a URL:

const searchTerm = 'hello world & goodbye';
const url = `https://example.com/search?q=${encodeURIComponent(searchTerm)}`;
// https://example.com/search?q=hello%20world%20%26%20goodbye

encodeURI

Preserves URL structure characters like : / ? # [ ] @ ! $ & ' ( ) * + , ; =

Use this when encoding a complete URL that might contain Unicode characters:

const url = 'https://example.com/path/to/page?name=José';
const encoded = encodeURI(url);
// https://example.com/path/to/page?name=Jos%C3%A9

Common Use Cases

Query Parameters

When building URLs with dynamic values, always encode each parameter value:

const params = new URLSearchParams({
  name: 'John Doe',
  email: 'john@example.com',
  message: 'Hello & welcome!'
});
const url = `https://api.example.com/submit?${params}`;

API Requests

REST APIs often require encoded values in path segments or query strings:

GET /users/John%20Doe/posts?tag=c%2B%2B

Form Data

HTML forms with application/x-www-form-urlencoded encoding type use URL encoding for form values. Spaces are encoded as + instead of %20 in this context.

Redirects

When constructing redirect URLs, the target URL itself often needs to be encoded:

https://auth.example.com/login?redirect=https%3A%2F%2Fapp.example.com%2Fdashboard

How to Use Our URL Encode/Decode Tool

1. Paste your text or URL into the input area
2. Select the mode: encodeURIComponent for values, encodeURI for full URLs
3. Click Encode to percent-encode, or Decode to reverse the process
4. Copy the result with one click

Tips

• Use encodeURIComponent for query parameter values — it’s the safer choice
• Use encodeURI only when you have a complete URL with Unicode characters
• The Use as input button lets you chain encode/decode operations
• Double-encoding (encoding an already-encoded string) is a common bug — decode first if unsure

Frequently Asked Questions

What’s the difference between %20 and + for spaces? %20 is the standard URL encoding for space. + is only used in application/x-www-form-urlencoded content (like HTML form submissions). In general URL contexts, always use %20.

Can I encode non-ASCII characters? Yes. Characters like é, 中, or emoji are first converted to UTF-8 bytes, then each byte is percent-encoded. For example, é becomes %C3%A9.

Is URL encoding reversible? Yes, decoding always produces the original string. However, be aware that some characters might have multiple valid encodings.

---

Try our free URL Encode/Decode tool to quickly encode or decode URL strings right in your browser.