How to Encode and Decode URLs (Percent-Encoding)

If you’ve ever copied a link and it turned into a mess of %20, %E2%9C%A8, and %3F, you’ve seen URL Encoding (also known as Percent-Encoding) in action.

While it looks messy to humans, this encoding is critical for the web. It allows browsers to send complex data like search queries, emojis, and special symbols safely across the internet.

Why Do We Need Encoding?

URLs are designed to use only a specific subset of ASCII characters (A-Z, 0-9, and a few punctuation marks).

Any character outside this set is considered “unsafe” and must be converted. Also, “Reserved Characters” like ?, /, and & have special jobs in a URL structure.

The Problem: If you want to search for “C++”, and you put it directly in the URL: example.com/search?q=C++

The server might read the + as a space (an old convention), and search for “C ” instead.

The Solution: Encode the + to its hexadecimal value (%2B). example.com/search?q=C%2B%2B

Now the server reads it correctly.

Understanding Reserved vs. Unsafe Characters

URLs have specific rules about which characters can appear unencoded:

Reserved Characters (special meaning in URLs):

• ; / ? : @ & = + $ ,

Unsafe Characters (must always be encoded):

• Spaces, < > # % { } | \ ^ ~ [ ] `

Non-ASCII Characters (must be encoded):

• Any Unicode character beyond basic ASCII (Chinese, Arabic, emojis, accented letters)

For example, the URL https://example.com/search?name=José García should become: https://example.com/search?name=Jos%C3%A9%20Garc%C3%ADa

How to Encode in JavaScript

1. encodeURI()

Encodes a full URL. It ignores protocol characters (:, /, ?, #) so the URL remains functional.

• Use when: You have a complete link that might have spaces or Unicode characters.

const url = "https://example.com/path/to file.html";
console.log(encodeURI(url));
// https://example.com/path/to%20file.html

2. encodeURIComponent()

Encodes a URL component (like a query value). It escapes everything, including slashes and colons.

• Use when: You’re building a URL and inserting a user’s search term or username.

const term = "Tools & More";

// Wrong:
console.log(`site.com?q=${term}`); // site.com?q=Tools & More
// Result: Server thinks q="Tools" and there's a new parameter "More"

// Right:
console.log(`site.com?q=${encodeURIComponent(term)}`);
// site.com?q=Tools%20%26%20More
// Result: Server decodes q="Tools & More"

3. When to Use Each

Here’s a real scenario: You’re building a Google search redirect link.

const query = "JavaScript tutorials for beginners";
const category = "programming/web-dev";

// Building the full URL
const baseUrl = "https://www.google.com/search";
const params = new URLSearchParams({
  q: query,
  category: category
});

const fullUrl = `${baseUrl}?${params}`;
console.log(fullUrl);
// https://www.google.com/search?q=JavaScript+tutorials+for+beginners&category=programming%2Fweb-dev

Notice how URLSearchParams automatically handles encoding for you. This is the safest approach in modern JavaScript.

Decoding URLs

To reverse the process:

const encoded = "Hello%20World%21%20%F0%9F%91%8B";

console.log(decodeURIComponent(encoded));
// Hello World! 👋

Warning: Never decode twice or you’ll corrupt the data:

const once = decodeURIComponent("100%25"); // "100%"
const twice = decodeURIComponent(once);    // Error or wrong result

When to Use URL Encoding

1. API Development

When sending data to REST APIs:

const username = "user@example.com";
const endpoint = `https://api.example.com/users/${encodeURIComponent(username)}`;
// https://api.example.com/users/user%40example.com

2. Analytics Tracking

UTM parameters for marketing campaigns:

const campaign = "Spring Sale 2026";
const source = "Email Newsletter #5";
const url = `https://shop.com/?utm_campaign=${encodeURIComponent(campaign)}&utm_source=${encodeURIComponent(source)}`;

3. File Paths in URLs

When linking to files with spaces or special characters:

const filename = "Q4 Report (Final).pdf";
const downloadLink = `https://files.example.com/docs/${encodeURIComponent(filename)}`;
// https://files.example.com/docs/Q4%20Report%20(Final).pdf

4. Social Media Share Links

When creating share buttons:

const tweetText = "Check out this awesome tool! 🚀";
const shareUrl = "https://utilhq.com/tools/url-encoder-decoder";
const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}&url=${encodeURIComponent(shareUrl)}`;

Common Encoding Mistakes

Mistake #1: Encoding the Entire URL

// WRONG (breaks the protocol)
encodeURI("https://example.com/path?q=test");
// "https://example.com/path?q=test" (looks the same but protocol is broken)

// RIGHT (only encode the parts that need it)
const base = "https://example.com/path";
const query = encodeURIComponent("test value");
`${base}?q=${query}`;

Mistake #2: Forgetting to Encode Query Parameters

// WRONG
`/search?q=apples & oranges`;
// Server interprets this as two parameters: q="apples " and oranges=""

// RIGHT
`/search?q=${encodeURIComponent('apples & oranges')}`;
// /search?q=apples%20%26%20oranges

Mistake #3: Double Encoding

const text = "hello world";
const encoded = encodeURIComponent(text);        // "hello%20world"
const doubleEncoded = encodeURIComponent(encoded); // "hello%2520world" (WRONG!)

URL Encoding in Other Languages

Python

from urllib.parse import quote, unquote

text = "Hello World!"
encoded = quote(text)  # 'Hello%20World%21'
decoded = unquote(encoded)  # 'Hello World!'

PHP

$text = "Hello World!";
$encoded = urlencode($text);  // "Hello+World%21"
$decoded = urldecode($encoded);  // "Hello World!"

Ruby

require 'uri'

text = "Hello World!"
encoded = URI.encode_www_form_component(text)  # "Hello+World%21"
decoded = URI.decode_www_form_component(encoded)  # "Hello World!"

Use the Online Tool

For quick conversions without writing code, use our Free URL Encoder/Decoder. It handles standard percent-encoding instantly, making it perfect for debugging API calls, cleaning up messy links, or testing query parameters before deploying.

Frequently Asked Questions

What’s the difference between + and %20 for spaces?

Both represent spaces, but in different contexts. %20 is the standard URL encoding for spaces. The + symbol is an older convention specific to query strings (the part after ?). Modern applications should use %20 for consistency.

Why do some URLs have %E2%9C%A8 instead of emojis?

That’s UTF-8 encoding. Emojis and non-ASCII characters are converted to multiple percent-encoded bytes. For example, the sparkle emoji ✨ becomes %E2%9C%A8.

Can I encode HTML entities in URLs?

No. HTML entities like & are for HTML rendering, not URLs. In a URL, use %26 for ampersands, not &.

Is URL encoding secure?

Encoding isn’t encryption. It makes data URL-safe but doesn’t hide it. Always use HTTPS for sensitive data, and never put passwords or API keys in URLs.

Do I need to encode numbers?

No. Numbers 0-9 are safe characters and don’t need encoding. However, if a number is part of a string with special characters, encode the entire string.