URL Encoding Encode & Decode
Free online URL Encoding Encode & Decode tool. 100% local processing — your data never leaves your device.
Result will be displayed here...
Input → Encode
Usage Guide
About URL Encoding
URL Encoding (also known as Percent Encoding, defined in RFC 3986) is an encoding method that converts special characters in URLs to safe characters. URLs only allow a subset of ASCII characters (letters, numbers, and a few special characters); other characters (such as spaces, Chinese characters, special symbols) must be encoded before they can be used in URLs. URL encoding converts each byte to %XX format, where XX is the hexadecimal representation of that byte. URL encoding is fundamental to web development, widely used in URL parameters, form submissions, HTTP requests, and other scenarios.
Usage Steps
URL encoding and decoding is very simple:
Encoding Rules
URL encoding follows these rules:
encodeURIComponent() correctly handles most cases.Common Encoding Examples
Here are URL encodings for some common characters:
Application Scenarios
URL encoding is widely used in various web development scenarios:
FAQ
Q: What's the difference between URL encoding and Base64?
A: URL encoding and Base64 are both used to handle special characters, but for different purposes. URL Encoding: 1) Purpose: Enable special characters to be safely transmitted in URLs. 2) Format: %XX (e.g., %20). 3) Scenarios: URL parameters, form submissions. Base64: 1) Purpose: Convert binary data to text format. 2) Format: A-Z, a-z, 0-9, +, /. 3) Scenarios: Embedding images, JWT, email attachments. Selection Advice: 1) URL parameters: use URL encoding. 2) Binary data: use Base64. 3) Both can be combined (e.g., Base64 encode then URL encode).
Q: Should spaces be encoded as %20 or +?
A: Space encoding depends on the URL location. %20: 1) Used in URL path portion (e.g., /path/hello%20world). 2) Used in Fragment (after #). 3) encodeURIComponent() encodes spaces as %20. +: 1) Used in query strings (after ?, e.g., ?q=hello+world). 2) application/x-www-form-urlencoded format uses +. Recommendation: Use encodeURIComponent() to uniformly encode as %20; servers will automatically handle both + and %20.
Q: How to use URL encoding in JavaScript?
A: JavaScript provides three URL encoding functions with different purposes. encodeURIComponent(): Encodes URI components (parameter values), recommended. Encodes all special characters (except A-Z, a-z, 0-9, -, _, ., ~). encodeURI(): Encodes complete URI, preserves URI structure characters (such as :, /, ?, &). Suitable for encoding complete URLs. escape(): Deprecated, not recommended. Example:// Encode parameter value (recommended)
encodeURIComponent('Hello World'); // 'Hello%20World'
// Encode complete URL
encodeURI('https://example.com/hello world'); // 'https://example.com/hello%20world'
Decoding: Use decodeURIComponent() or decodeURI().
Q: How are Chinese characters URL encoded?
A: Chinese characters need to be first converted to UTF-8 bytes, then encoded in %XX format. Example: “Hello” (你好) → UTF-8 bytes: E4 BD A0 E5 A5 BD → URL encoding: %E4%BD%A0%E5%A5%BD. JavaScript: encodeURIComponent('你好') automatically handles UTF-8 conversion. Note: 1) Different encodings (such as GBK) will produce different results. 2) Server needs to correctly decode UTF-8. 3) Modern web applications uniformly use UTF-8 encoding.
Q: Does URL encoding increase data size?
A: Yes, URL encoding increases data size, with the increase depending on character type. ASCII Characters: 1) Letters, numbers: not encoded, size unchanged. 2) Special characters (such as &, =): encoded as 3 bytes (%XX), 200% increase. Chinese Characters: 1) UTF-8 encoding: 1 Chinese character = 3 bytes = 9 bytes encoded (%XX%XX%XX), 200% increase. Example: “Hello” (你好, 6 bytes) → %E4%BD%A0%E5%A5%BD (18 bytes). Optimization: 1) Use POST requests to transmit large amounts of data. 2) Consider using JSON format (no URL encoding needed).
Q: What's the difference between URL encoding and HTML entity encoding?
A: URL encoding and HTML entity encoding are used in different scenarios. URL Encoding: 1) Purpose: Transmit special characters in URLs. 2) Format: %XX (e.g., %20). 3) Scenarios: URL parameters, form submissions. HTML Entity Encoding: 1) Purpose: Display special characters in HTML. 2) Format: &name; (e.g., <) or &#number; (e.g., <). 3) Scenarios: HTML content, attribute values. Example: < → URL encoding: %3C, HTML entity: < or <.
Use Cases
Recommended: URL Query Parameters
Passing parameters in URL query strings is the most common application of URL encoding. Query strings start with ?, parameters are separated by &, and parameter names and values are connected with =. If parameter values contain special characters (such as spaces, &, =, Chinese), they must be URL encoded. Using JavaScript's encodeURIComponent() correctly encodes parameter values.
- ✅ Use encodeURIComponent() to encode parameter values
- ✅ Use URLSearchParams API to build query strings
- ✅ Server uses corresponding decoding functions
- ❌ Don't manually concatenate URL parameters
- 💡 Consider using POST requests for large amounts of data
Recommended: HTML Form Submission
HTML forms submit data using application/x-www-form-urlencoded encoding, a variant of URL encoding. Form data is submitted in key=value&key=value format, with spaces encoded as +, and other special characters encoded as %XX. Modern browsers automatically handle form encoding; developers typically don't need to manually encode. However, when building form data using JavaScript (such as Fetch API), manual encoding is needed.
- ✅ Use FormData API to automatically handle encoding
- ✅ Use URLSearchParams to build form data
- ✅ Server correctly decodes form data
- 💡 For file uploads, use multipart/form-data
Recommended: RESTful API Path Parameters
In RESTful APIs, resource identifiers may contain special characters (such as spaces, slashes, Chinese), requiring URL encoding. For example, /users/John Doe should be encoded as /users/John%20Doe. Use encodeURIComponent() to encode path parameters, ensuring the API can correctly parse resource identifiers.
- ✅ Use encodeURIComponent() to encode path parameters
- ✅ Server correctly decodes path parameters
- ✅ Consider using IDs instead of names as resource identifiers
- 💡 Use URL template libraries (like path-to-regexp)
Recommended: OAuth Authentication
Parameters like redirect_uri and state in OAuth authentication flows need URL encoding. For example, redirect_uri is typically a complete URL containing query parameters, which needs to be encoded as a whole before being passed as a parameter value. Use encodeURIComponent() to encode these parameters, ensuring the OAuth server can correctly parse them.
- ✅ Use encodeURIComponent() to encode redirect_uri
- ✅ Use encodeURIComponent() to encode state parameter
- ✅ Verify decoded redirect_uri is valid
- 💡 Use OAuth libraries (like Passport.js) for automatic handling
Recommended: Search Engine Queries
Search keywords need URL encoding when passed in URLs. For example, Google search for “hello world” has the URL https://www.google.com/search?q=hello+world. Search engines automatically handle URL encoding; users typically don't need to manually encode. However, when building search URLs (such as automatic redirects), encodeURIComponent() should be used to encode search keywords.
- ✅ Use encodeURIComponent() to encode search keywords
- ✅ Handle multiple keywords (separated by spaces or +)
- ✅ Consider using search engine APIs
- 💡 Use URLSearchParams to build search URLs
Recommended: URL Shortening Services
URL shortening services (such as bit.ly, t.cn) need to encode long URLs before storing and transmitting them. Long URLs may contain special characters (such as query parameters), requiring URL encoding. Use encodeURIComponent() to encode long URLs, ensuring the shortening service can correctly parse and restore them. Note that shortening services typically encode the encoded URL again, so decoding may require multiple passes.
- ✅ Use encodeURIComponent() to encode long URLs
- ✅ Verify decoded URLs are valid
- ✅ Handle multiple encoding cases
- 💡 Use shortening service APIs
Best Practice Recommendations
- Use encodeURIComponent() to encode URL parameter values, use encodeURI() to encode complete URLs.
- Spaces in query strings are encoded as +, in paths as %20; use encodeURIComponent() to uniformly encode as %20.
- Chinese characters use UTF-8 encoding; ensure server correctly decodes.
- Don't manually concatenate URL parameters; use URLSearchParams API or FormData API for automatic encoding handling.
- URL encoding increases data size; for large amounts of data, use POST requests or JSON format.
- Verify decoded URLs are valid to prevent URL injection attacks.