URL Encoder & Decoder

How to Use the URL Encoder & Decoder

Enter or paste any text into the input field and click Encode to convert it to URL-encoded format. The tool provides two output formats simultaneously: Component Encoded uses the equivalent of JavaScript's encodeURIComponent(), which encodes all special characters including URL delimiters like /, ?, and #. Full URL Encoded uses the equivalent of encodeURI(), which preserves URL structural characters while encoding everything else. To reverse the process, paste encoded text into the input field and click Decode. Both output fields will show the same decoded result.

The stats grid below the output shows the character length and byte size of both input and output, helping you understand how encoding affects data size. Each output field has its own Copy button for quick clipboard access. This tool runs entirely in your browser with no data sent to any server.

What Is URL Encoding?

URL encoding, formally known as percent-encoding, is defined in RFC 3986 as the mechanism for representing characters in a Uniform Resource Identifier (URI) that are not allowed in the URI syntax. URLs can only contain a limited set of ASCII characters: letters, digits, and a handful of special characters (- _ . ~) known as unreserved characters. Any other character must be encoded as a percent sign followed by two hexadecimal digits representing its byte value. For example, a space is encoded as %20, an ampersand as %26, and a plus sign as %2B.

Reserved characters such as : / ? # [ ] @ ! $ & ' ( ) * + , ; = have special structural meaning in URLs. When these characters appear as data rather than delimiters, they must be percent-encoded. For instance, if a search query contains an ampersand, it must be encoded as %26 so it is not interpreted as a parameter separator.

encodeURIComponent vs encodeURI

JavaScript provides two built-in functions for URL encoding, each serving a different purpose. encodeURIComponent() encodes all characters except unreserved characters (A-Z, a-z, 0-9, - _ . ~). This makes it ideal for encoding individual URL components such as query parameter values, path segments, or fragment identifiers. It encodes characters like / ? # & = because these would break the structure if left unencoded within a component value.

encodeURI() encodes a complete URI while preserving the characters that give a URL its structure: : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Use it when you have a full URL that may contain non-ASCII characters (such as accented letters or spaces in the path) but whose structural delimiters should remain intact. For example, encodeURI("https://example.com/path with spaces") correctly encodes only the spaces while keeping the :// and / delimiters.

Spaces: + vs %20

The treatment of spaces in URLs has two conventions. The percent-encoding standard (RFC 3986) encodes spaces as %20, and this is the correct encoding for path segments and fragment identifiers. The application/x-www-form-urlencoded format, used by HTML forms when submitting data via GET or POST, encodes spaces as +. This format is defined in the HTML specification and is what browsers use when serializing form data into query strings. Both %20 and + are valid representations of a space, but they belong to different contexts. When constructing URLs programmatically, prefer %20 for consistency with RFC 3986.

Common Use Cases

URL encoding is essential in many web development scenarios. When building URLs with dynamic query parameters, each parameter value must be encoded to prevent special characters from breaking the URL structure. API requests frequently require encoding of parameter values, especially when passing user-generated content, search terms, or file names. Redirect URLs embedded as query parameters must be fully encoded so the entire redirect target is treated as a single value. Form data sent in GET requests is automatically URL-encoded by browsers, but server-side code often needs to encode values when constructing URLs for redirects, API calls, or link generation.

Another common scenario is encoding data for use in data: URIs, bookmarklets, and JavaScript location.href assignments. Encoding is also critical when constructing OAuth signatures, HMAC-signed URLs, and any security-sensitive URL manipulation where incorrect encoding could lead to signature mismatches or injection vulnerabilities.

Frequently Asked Questions

What is URL encoding?

URL encoding (percent-encoding) converts characters not allowed in URLs into a percent sign followed by two hex digits. Spaces become %20, ampersands become %26.

What is the difference between encodeURI and encodeURIComponent?

encodeURI preserves URL structural characters like :, /, ?, and #. encodeURIComponent encodes everything except unreserved characters, making it suitable for encoding individual query parameter values.

Why are spaces encoded as + or %20?

The application/x-www-form-urlencoded format uses + for spaces in form submissions. The RFC 3986 standard uses %20. Both are valid in different contexts.

When should I URL-encode text?

Whenever you include user input or special characters in query parameters, path segments, or fragment identifiers. This prevents characters like & and = from being interpreted as URL delimiters.

Can I URL-encode an entire URL?

No. Encoding an entire URL would escape structural characters like :// and / making the URL invalid. Encode only individual components like parameter values and path segments.