URL Encoder/Decoder

How to Use This URL Encoder/Decoder

1. Select your mode: Click "Encode" to convert text with special characters into URL-safe format, or "Decode" to convert percent-encoded strings back to readable text. The active mode is highlighted.
2. Choose the encoding method: Select "encodeURIComponent" (recommended) for encoding query parameter values or path segments. Select "encodeURI" for encoding complete URLs while preserving structural characters like colons and slashes.
3. Enter your content: Type or paste your text, URL, or encoded string in the input area. The tool processes your input in real-time, showing results immediately as you type.
4. Review the output: Check the encoded or decoded result in the output area. Character count statistics help you understand how encoding affects string length.
5. Use the Swap button: Click "Swap" to move the output to the input field and toggle between encode/decode modes. This is useful for testing round-trip encoding or verifying that decoded content re-encodes correctly.
6. Copy the result: Click "Copy Result" to copy the output to your clipboard for use in URLs, API calls, or your code.

What is URL Encoding?

URL encoding, also known as percent-encoding, is a mechanism for encoding special characters in URLs (Uniform Resource Locators). Defined in RFC 3986, URL encoding ensures that URLs contain only valid ASCII characters that can be safely transmitted over the internet without being misinterpreted by browsers, servers, or network equipment.

URLs have a specific structure with reserved characters that have special meanings: the colon separates the scheme from the host, slashes delimit path segments, question marks begin query strings, ampersands separate query parameters, and equals signs assign values to parameters. When these characters appear in data values rather than as structural delimiters, they must be encoded to prevent parsing errors.

The encoding process replaces unsafe characters with a percent sign (%) followed by two hexadecimal digits representing the character's ASCII code. For example, a space becomes %20, an ampersand becomes %26, and a plus sign becomes %2B. Non-ASCII characters are first encoded as UTF-8 bytes, then each byte is percent-encoded individually.

Understanding encodeURIComponent vs encodeURI

encodeURIComponent: This function encodes all characters except: A-Z a-z 0-9 - _ . ! ~ * ' ( ). It is designed for encoding values that will be placed in URL components like query parameters or path segments. Use this when you need to ensure your data will not interfere with URL structure.

encodeURI: This function is less aggressive and preserves URL structural characters including: : / ? # @ & = + $ ,. Use it when you have a complete URL and want to encode only the parts that are definitely unsafe while keeping the URL structure intact.

When to use which: Use encodeURIComponent for encoding individual values like search terms, user input, or data being passed as query parameters. Use encodeURI only when encoding a complete URL string where you want to preserve existing structure. In most cases, encodeURIComponent is the safer choice.

Common URL Encoding Examples

Space: Encoded as %20 in URLs. In query strings, spaces can also be represented as +, though %20 is more universally compatible.

Ampersand (&): Encoded as %26. Critical to encode in query parameter values since & normally separates different parameters.

Equals (=): Encoded as %3D. Must be encoded in values since = normally separates parameter names from values.

Question mark (?): Encoded as %3F. Normally marks the start of a query string, so must be encoded when appearing in data.

Hash/Pound (#): Encoded as %23. Normally indicates a URL fragment, so must be encoded in paths and parameters.

Forward slash (/): Encoded as %2F. Normally separates path segments, encode when it is part of data rather than structure.

URL Encoding in Different Contexts

Query parameters: Values in query strings like ?search=hello+world&category=books must have special characters encoded. The parameter value "C++" would be encoded as "C%2B%2B" to avoid confusion with the space-representing plus sign.

Path segments: File names or resource identifiers in URL paths must be encoded. A file named "my report.pdf" would appear in a URL as "my%20report.pdf".

Form submissions: HTML forms with method="GET" encode form data in the URL. The browser automatically URL-encodes field values, converting "San Francisco" to "San%20Francisco".

API requests: When building API URLs programmatically, always encode parameter values to prevent injection attacks and ensure proper parsing on the server.

Best Practices for URL Encoding

Always encode user input before incorporating it into URLs. Double-encoding (encoding already-encoded strings) creates incorrect URLs, so ensure you encode only once. When debugging URL issues, decode the URL first to see the actual data being transmitted. Test encoded URLs thoroughly, especially with special characters, unicode, and edge cases. Remember that different programming languages may have slightly different encoding functions, but they should all produce RFC 3986 compliant output.