URL Encoding Explained

What Is URL Encoding?

URL encoding (percent-encoding) is an encoding mechanism for representing special characters in URLs. In URLs, only letters, numbers, hyphens, underscores, periods, and tildes can be used directly - all other characters must be encoded. The encoding rule converts characters to their hexadecimal ASCII code representation, prefixed with a % sign.

The primary purpose of URL encoding is to ensure URL semantic correctness and transmission security. It resolves parsing ambiguity issues that special characters can cause. For example, the & symbol in query strings is used to separate parameters - if a parameter value contains &, it must be encoded. Similarly, non-ASCII characters like Chinese and Japanese also need encoding for URL transmission.

Encoding Rules Explained

The basic rules of URL encoding are: reserved characters (such as letters, numbers, -_.~) remain unchanged; special characters (such as !$&'()*+,/:;=?@) are encoded or not based on context; other characters are converted to UTF-8 byte sequences and encoded byte by byte. For example, space is encoded as %20 or +, and the Chinese character is encoded as %E4%BD%A0.

// Differences between JavaScript URL encoding functions

// encodeURI - does not encode URL structure characters
const url = 'https://example.com/path?name=Hello&age=20';
console.log(encodeURI(url));
// 'https://example.com/path?name=Hello&age=20'

// encodeURIComponent - encodes all special characters
const param = 'name=Hello&age=20';
console.log(encodeURIComponent(param));
// 'name%3DHello%26age%3D20'

// Recommended: Use URLSearchParams to build query strings
const searchParams = new URLSearchParams();
searchParams.append('query', 'Hello World');
const searchUrl = '/api/search?' + searchParams.toString();

Common Errors and Solutions

Double encoding is a common issue - when an encoded string is encoded again, %20 becomes %2520. The solution is to ensure encoding happens only once before sending and decoding happens only once after receiving. Another issue is encoding consistency - different systems may use different character sets (UTF-8 vs GBK), causing garbled text. It is recommended to use UTF-8 encoding throughout.

Recommended Tools

URL Encoder/Decoder is an online URL encode/decode tool supporting batch processing. Postman automatically handles URL encoding when sending requests. The Network panel in browser developer tools can show the actual encoding of requests, helping debug encoding issues.