Understanding URL Encoding: When and Why You Need It

If you have ever seen a URL filled with %20 or %3F, you have encountered URL encoding. Also known as percent-encoding, this mechanism is essential for transmitting data over the internet. Without it, URLs would break whenever they contained spaces, special characters, or non-ASCII text.

What Is URL Encoding?

URLs can only be sent over the internet using the ASCII character set. If a URL contains characters outside of this set — like spaces, emojis, or foreign alphabets — they must be converted into a valid ASCII format. This is done by replacing the unsafe character with a % followed by two hexadecimal digits representing the character’s byte value in UTF-8.

For example:

• A space ( ) becomes %20
• An ampersand (&) becomes %26
• A hash (#) becomes %23
• A forward slash (/) becomes %2F
• A question mark (?) becomes %3F

Reserved Characters and Their Meanings

Certain characters have special meanings in URLs and must be encoded if they appear as part of the data rather than as syntax:

Consider this example: you want to pass a search query as a URL parameter.

https://example.com/search?q=cats & dogs

The space and ampersand in “cats & dogs” would break the URL. The browser would interpret the & as a parameter separator and treat dogs as a new parameter. The correct encoded URL is:

https://example.com/search?q=cats%20%26%20dogs

URL Encoding vs. HTML Encoding

A common source of confusion is the difference between URL encoding and HTML encoding:

• URL encoding: Uses % followed by hex digits (e.g., %20 for space). Used in URLs and query strings.
• HTML encoding: Uses & followed by entity names or &# followed by numbers (e.g., & for ampersand). Used in HTML documents.

They serve different purposes and should not be confused. A correctly formatted URL might look like ?q=A%26B, while the same value in HTML would be A&B.

When Do You Need URL Encoding?

Form Submissions

When a user submits a form with method GET, the browser automatically URL-encodes the form data and appends it to the URL as a query string. However, if you are constructing URLs manually in JavaScript or on the server, you must encode parameters yourself.

API Requests

When making API calls with query parameters that contain special characters, you must encode them properly. For example:

GET /api/users?filter=name:John&role=admin

If the filter value itself contains & (e.g., “admin & user”), it must be encoded.

Redirect URLs

When redirecting users to another page with a return URL parameter, the destination URL must be encoded:

https://example.com/login?returnUrl=https%3A%2F%2Fexample.com%2Fdashboard

Without encoding, the nested URL’s query parameters would be misinterpreted.

JavaScript Functions for URL Encoding

JavaScript provides three functions for URL encoding:

encodeURI(): Encodes a complete URI but preserves characters that are part of the URI syntax (:, /, ?, #, etc.). Use this for encoding entire URLs.

encodeURI("https://example.com/search?q=cats & dogs")
// Result: "https://example.com/search?q=cats%20&%20dogs"

encodeURIComponent(): Encodes a URI component by escaping all characters except letters, digits, and a few special characters (-, _, ., !, ~, *, ', (, )). Use this for encoding query string parameters.

encodeURIComponent("cats & dogs")
// Result: "cats%20%26%20dogs"

decodeURIComponent(): Reverses the encoding, converting %20 back to spaces and %26 back to &.

The distinction between encodeURI and encodeURIComponent is critical. Using encodeURI on a query parameter value that contains & will NOT encode the &, leading to broken URLs.

Common Pitfalls

1. Forgetting to encode user input: Always encode any user-supplied data that goes into a URL. Failure to do so can lead to broken links or security vulnerabilities.

2. Double encoding: If you encode a value that is already encoded, %20 becomes %2520 (the % itself gets encoded to %25). Some APIs handle this gracefully, but many do not.

3. Assuming ASCII only: With the global web, URLs frequently contain non-ASCII characters like ñ, ü, or Chinese characters. These must always be encoded.

4. Not encoding the entire URL: Only encode individual components, not the entire URL. Encoding the : in https:// would break the protocol identifier.

If you need a quick way to encode or decode a string without opening the DevTools console, use our offline URL Encoder/Decoder. It uses the browser’s built-in encodeURIComponent and decodeURIComponent functions, works completely offline, and handles all edge cases correctly.