URL Encoding Explained: What It Is and How It Works

Introduction

URL encoding explained simply: it is the process of converting special characters into a format that can be safely transmitted over the internet. Also called percent encoding, URL encoding replaces unsafe characters with a percent sign (%) followed by their hexadecimal ASCII value. For example, a space becomes %20, a question mark becomes %3F, and an ampersand becomes %26.

URLs can only contain certain characters: letters (A-Z, a-z), digits (0-9), hyphens (-), periods (.), underscores (_), and tildes (~). Any other character, including spaces, special symbols, and accented letters, must be encoded before inclusion in a URL. Without encoding, URLs can break, return incorrect results, or create security vulnerabilities.

Why Special Characters Must Be Encoded

Some characters have special meaning in URLs. The question mark (?) starts the query string, the ampersand (&) separates multiple parameters, and the hash (#) indicates a fragment identifier. If you want to include these characters as literal values in a URL parameter, they must be encoded, or the browser will interpret them as URL structure rather than data.

For example, if you want to search for "hello & goodbye", the ampersand in the query parameter value would be misinterpreted as a parameter separator. The solution is to encode the ampersand as %26: https://example.com/search?q=hello%20%26%20goodbye. Spaces must also be encoded because URLs cannot contain literal spaces. A space is encoded as %20.

Percent Encoding Format

Percent encoding uses the format %XX, where XX is the two-digit hexadecimal representation of the character’s ASCII or UTF-8 byte value. The percent sign (%) acts as an escape character, signaling that the following two characters represent the encoded value. The encoding is case-insensitive for the hexadecimal digits, though lowercase is preferred for consistency.

The encoding process is straightforward: take the character code of the unsafe character, convert it to hexadecimal, and prepend a percent sign. For instance, the character "@" has ASCII code 64, which is 40 in hexadecimal, so "@" is encoded as %40.

Common Encoded Characters Table

Character	Encoded Value	Reason
Space	%20	Not allowed in URLs
!	%21	Unsafe character
#	%23	Fragment identifier
$	%24	Unsafe character
%	%25	Escape character itself
&	%26	Parameter separator
+	%2B	Represents space in query strings
?	%3F	Query string start
@	%40	Unsafe in some contexts
~	%7E	Safe but may be encoded

URL Encoding in JavaScript

JavaScript provides two built-in functions for URL encoding. encodeURI() encodes a complete URI while preserving characters that have special meaning in URIs (like ?, #, and /). encodeURIComponent() encodes a URI component and encodes all special characters, making it the right choice for encoding query parameter values. Use decodeURI() and decodeURIComponent() for decoding.

Example: encodeURIComponent("hello & goodbye") returns "hello%20%26%20goodbye". This encoded string is safe to include as a query parameter value without breaking the URL structure.

Practical Examples

Example 1: A search query for "free online tools for developers" becomes "free%20online%20tools%20for%20developers". Without encoding, the spaces would break the URL.

Example 2: An API endpoint with parameters: https://api.example.com/users?name=John%20Doe&filter=status%3Dactive%26role%3Dadmin. The & in the filter value is encoded as %26 to prevent it from being interpreted as a parameter separator.

Example 3: A redirect URL parameter: https://example.com/login?redirect=%2Fdashboard%3Ftab%3Dsettings. The forward slash and question mark in the redirect URL are encoded to preserve the nested URL structure.

Frequently Asked Questions

What is URL encoding?

URL encoding (percent encoding) converts unsafe characters in URLs into a percent sign followed by two hexadecimal digits. It ensures that URLs are valid, secure, and correctly interpreted by browsers and servers.

Why do URLs need encoding?

URLs can only contain a limited set of characters. Special characters like spaces, ampersands, question marks, and hashes have reserved meanings in URLs. Encoding these characters prevents them from being misinterpreted and breaking the URL structure.

What is the difference between encodeURI and encodeURIComponent?

encodeURI encodes a complete URI and preserves characters that have special URI meaning (like ?, /, #). encodeURIComponent encodes a URI component and encodes all special characters. Use encodeURIComponent for encoding query parameter values.

Is %20 the same as + in URLs?

In query strings (the part after ?), + represents a space in application/x-www-form-urlencoded format. However, %20 is the standard URL encoding for spaces and works everywhere. Most modern systems prefer %20 over + for consistency.

How do I decode a URL in JavaScript?

Use decodeURI() to decode a complete URI and decodeURIComponent() to decode an encoded component. These functions reverse the encoding performed by encodeURI and encodeURIComponent respectively.

Try URL Encoding Yourself

Now that you understand how URL encoding works, try encoding and decoding URLs yourself. Use our free URL Encoder/Decoder online to instantly encode special characters for safe URLs or decode percent-encoded strings—no signup required.

---