Percent Encoding Explained — Everything Developers Get Wrong About URLs

You've seen URLs like https://example.com/search?q=hello%20world and wondered what %20 means. Or you've built a search feature, passed a query parameter containing an ampersand, and watched the entire URL silently break in ways that took an hour to debug. URL encoding — also called percent encoding — is one of those fundamentals that every web developer encounters daily but few truly understand. This guide fixes that completely.

What Is Percent Encoding and Why Does It Exist?

URLs are transmitted over the internet using the ASCII character set — a 128-character standard that dates back to 1963. The problem is that modern web applications deal with data far richer than ASCII: user names in Hindi, product titles in Japanese, addresses in Arabic, email subjects with special characters. None of these exist in ASCII.

Beyond script characters, even common symbols like spaces, ampersands, equals signs, and slashes have structural meaning in URLs. A & separates parameters. A ? starts the query string. A / separates path segments. If your data contains any of these, inserting them raw into a URL breaks its structure.

The Two Functions You Must Know — and When to Use Each

JavaScript provides two encoding functions. Choosing the wrong one is the single most common URL encoding mistake. Here's the definitive answer:

encodeURIComponent() — Use This for Query Values

encodeURIComponent() encodes everything except the unreserved characters: letters (A–Z, a–z), digits (0–9), and - _ . ~. It encodes structural characters like / ? # & = + : along with spaces and Unicode characters.

Use it when encoding individual query parameter values, path segment values, or any data that should not be interpreted as URL structure.

encodeURI() — Use This for Full URLs

encodeURI() encodes a complete URL. It leaves all characters that have structural meaning in URLs untouched — ; , / ? : @ & = + $ # — because those are legitimate URL characters that define the URL's structure. It only encodes characters that are never valid in any part of a URL.

Use it when you have a complete URL that might contain spaces or non-ASCII characters, but you want to preserve its structural integrity.

The Most Costly Mistake — Using the Wrong Function

What happens when developers use encodeURI() where they should use encodeURIComponent()? Consider building a redirect parameter:

var redirect = "https://app.in/cart?id=5";
var url = "/login?next=" + encodeURI(redirect);

Result:
/login?next=https://app.in/cart?id=5

The ? and = are not encoded.
The server sees TWO query strings.

var redirect = "https://app.in/cart?id=5";
var url = "/login?next=" + encodeURIComponent(redirect);

Result:
/login?next=https%3A%2F%2Fapp.in%2Fcart%3Fid%3D5

The entire redirect URL is safely
encoded as a single parameter value.

This exact bug breaks authentication flows in production applications regularly. The fix is always: if it's a value, use encodeURIComponent(). If it's an entire URL, use encodeURI().

Spaces: %20 vs + — What's the Difference?

You've probably noticed that spaces sometimes appear as %20 and sometimes as + in URLs. Both represent spaces, but in different contexts:

• %20 is the RFC 3986 standard percent encoding for a space character. Used in modern URL encoding, REST APIs, and path segments.
• + represents a space in the older application/x-www-form-urlencoded format — the encoding used when HTML forms submit data via GET. This is a legacy format still widely used in form submissions.

If you're reading a URL from a form submission and decoding it server-side, you need to handle both. Most server frameworks do this automatically. But if you're manually building query strings in JavaScript, stick to encodeURIComponent() which produces %20 — the safer, more universally understood format.

Encoding Non-Latin Scripts — Hindi, Tamil, and Beyond

This is where Indian developers often hit unexpected behavior. Hindi, Tamil, Telugu, Bengali, and other scripts use characters that require multiple bytes in UTF-8 encoding. Each byte gets its own percent-encoded triplet.

For example, the Hindi word नमस्ते (namaste) encodes to:

This is why URLs with Indian language content look very long when encoded. A 6-character Hindi word might encode to 54 characters. This is completely normal and expected. Modern browsers display the decoded version in the address bar for readability, but the actual request is always sent with the encoded version.

Important: always ensure your web server and application are configured for UTF-8 encoding end-to-end. If there's a character encoding mismatch anywhere in the chain (server, database, application), non-Latin URLs will produce garbled text or errors even when properly percent-encoded.

When Browsers Encode Automatically — and When They Don't

Modern browsers are helpful — when you type a URL with spaces or non-ASCII characters into the address bar, they encode it automatically before sending the request. But this creates a false sense of security for developers.

Browser auto-encoding does not happen in JavaScript code. If you construct a URL string with unencoded special characters and pass it to fetch(), XMLHttpRequest(), or window.location.href, many environments will send it as-is — with spaces and special characters intact. Some browsers tolerate this; many servers do not; and it fails silently in ways that are very difficult to debug.

Practical URL Encoding Scenarios for Indian Developers

Here are real-world patterns that come up regularly when building for Indian audiences:

Search with Regional Language Keywords

Share URL with Special Characters

Building an API Request with Multiple Parameters

Decoding URLs — Reading What Was Sent

Decoding is the reverse operation. decodeURIComponent() converts percent-encoded sequences back to their original characters. You use this when reading URL parameters from an incoming request, parsing a redirect URL from a query string, or displaying a user-friendly version of an encoded URL.

One important caution: always wrap decodeURIComponent() in a try-catch. If the input contains a malformed percent sequence (like a bare % or %GH), it throws a URIError. Unhandled, this will crash your JavaScript execution context — a real production bug if you're decoding user-supplied URL parameters.

URL Encoding Best Practices — A Quick Reference

URL Encoding in Multiple Languages

Developers worldwide work with URL encoding in their own language contexts. Here's how the term is used globally: