URL Encode / Decode

How to Use the URL Encoder/Decoder

Paste your URL or text into the input field. Select the encoding mode (encodeURIComponent for query parameters, or encodeURI for full URLs), then click "Encode" or "Decode." The result appears in the output field. Use "Copy Output" to copy the result or "Swap" to move the output back into the input.

What Is URL Encoding?

URL encoding, also known as percent encoding, is a mechanism for encoding information in a Uniform Resource Identifier (URI). It replaces characters that are not allowed in URLs, or that have special meaning in URL syntax, with percent-encoded equivalents.

For example, a space character is encoded as %20, a forward slash as %2F, and an equals sign as %3D. This ensures that the URL is valid and can be correctly interpreted by web browsers and servers.

Characters That Need Encoding

The following categories of characters require URL encoding:

• Spaces: Encoded as %20 (or + in form data).
• Reserved characters: Characters like &, =, ?, #, /, @, and : have special meaning in URLs and must be encoded when used as data.
• Unsafe characters: Characters like { } | \ ^ ~ [ ] and backtick are not safe for use in URLs.
• Non-ASCII characters: International characters, emoji, and other non-ASCII characters must be UTF-8 encoded and then percent-encoded.

encodeURI vs. encodeURIComponent

JavaScript provides two built-in encoding functions:

• encodeURI: Encodes a complete URI, preserving URL structure characters like :, /, ?, #, and &. Use this when encoding a full URL.
• encodeURIComponent: Encodes all special characters, including URL structure characters. Use this when encoding individual query parameter values or path segments.

Common Use Cases

Building API URLs

When constructing URLs with query parameters, each parameter value should be encoded with encodeURIComponent to handle special characters safely. This prevents parameters from breaking the URL structure.

Debugging URLs

When debugging encoded URLs from server logs or API responses, use the decode function to see the original human-readable values. This is essential for troubleshooting query parameter issues.

Form Data Submission

HTML forms encode data as application/x-www-form-urlencoded by default. Understanding URL encoding helps debug form submission issues and construct manual POST requests.

Tips for Working with URLs

• Always encode user-provided data before inserting it into URLs to prevent injection attacks.
• Use encodeURIComponent for individual query parameter values, not the entire URL.
• Be aware that some systems double-encode URLs, resulting in sequences like %2520 (where %25 is the encoded %).
• When in doubt, decode a URL to inspect its contents before processing it.