{ sniptools }
Encoding

URL Encoder/Decoder

Encode and decode URL strings and components

|

What is URL Encoder?

URL encoding, formally known as percent-encoding, is the mechanism defined in RFC 3986 for representing arbitrary data within the components of a Uniform Resource Identifier (URI). URLs are restricted to a specific subset of ASCII characters — letters, digits, and a handful of symbols — because they must be transmitted reliably through systems (HTTP headers, HTML attributes, email bodies) that may interpret or strip other characters. Percent-encoding solves this by replacing unsafe characters with a percent sign followed by two hexadecimal digits representing the character's byte value.

The need for URL encoding arises constantly in web development. Any time user input ends up in a URL — search queries, form submissions, API parameters, redirect targets — special characters must be encoded to prevent them from being misinterpreted as URL syntax. An unencoded ampersand (&) in a query parameter would be read as a parameter separator. An unencoded equals sign (=) would be parsed as a key-value delimiter. An unencoded hash (#) would be treated as a fragment identifier, silently truncating the rest of the URL.

JavaScript provides two built-in functions for URL encoding that serve different purposes. encodeURI() is designed for encoding a complete URL — it preserves structural characters like ://?#&= that are valid in a full URL. encodeURIComponent() encodes a single component value (like a query parameter) and escapes everything except unreserved characters (letters, digits, - _ . ~). Choosing the wrong function is a common source of bugs: using encodeURI on a parameter value leaves dangerous characters intact, while using encodeURIComponent on a full URL breaks its structure.

How it works

Percent-encoding operates at the byte level, not the character level. For ASCII characters, this is straightforward: the character's byte value is represented as %HH where HH is two uppercase hexadecimal digits. A space (byte value 0x20) becomes %20, an ampersand (0x26) becomes %26, and a plus sign (0x2B) becomes %2B. The encoder checks each character against the set of unreserved characters — if it is unreserved (A-Z, a-z, 0-9, -, ., _, ~), it passes through unchanged; otherwise it is percent-encoded.

For non-ASCII characters like accented letters, CJK characters, or emojis, the process involves an extra step: the character is first encoded to its UTF-8 byte sequence, then each byte in that sequence is individually percent-encoded. The German umlaut character, for example, is two UTF-8 bytes and becomes two percent-encoded tokens. This UTF-8 encoding step is specified by RFC 3986 and is handled automatically by JavaScript's encodeURIComponent, but some legacy systems use other encodings (like Latin-1), which can cause decoding failures if the encoding is not consistent.

Decoding reverses the process: each %HH sequence is converted back to its byte value, and the resulting byte sequence is interpreted as UTF-8 to reconstruct the original characters. This tool shows both the encoded and decoded forms in real time, and supports iterative decoding — useful when dealing with double-encoded or triple-encoded strings where multiple layers of encoding have been applied accidentally.

How to use this tool

  1. To encode a string, paste or type it into the input field and select "Encode" mode. Choose between encodeURI (for full URLs) or encodeURIComponent (for individual values like query parameters) depending on your use case.
  2. To decode a percent-encoded string, paste it into the input field and select "Decode" mode. The tool converts all %HH sequences back to their original characters instantly.
  3. If you suspect double encoding (e.g., %2520 instead of %20), decode the string once and check if percent signs remain in the output. If so, decode again until you reach the original plain text.
  4. Use encodeURIComponent mode when encoding a value that will be placed into a query parameter, form field, or any part of a URL that should not contain structural characters like & or =.
  5. Use encodeURI mode when you have a complete URL and want to encode only the characters that are not valid in any URL position, while preserving the URL structure (protocol, slashes, query separators).
  6. Copy the encoded or decoded result using the copy button and paste it into your code, API client, or configuration file.

Examples

Encoding a search query for an API call

Your user searches for "shoes & boots (size 10+)". Use encodeURIComponent to encode this value before placing it in a query parameter: ?q=shoes%20%26%20boots%20(size%2010%2B). Without encoding, the & would be interpreted as a parameter separator, the + could be read as a space, and the parentheses might cause parsing issues in some systems.

Decoding a URL from analytics or server logs

Server logs and analytics tools often show URLs in their percent-encoded form, making them hard to read: /search?q=%E4%B8%AD%E6%96%87%E6%B5%8B%E8%AF%95. Paste the encoded URL into the decoder to instantly see the original characters, revealing that the query was a Chinese text search. This saves time when investigating user behavior or debugging request paths.

Debugging a redirect chain with encoded callback URLs

OAuth flows often involve redirect URIs passed as query parameters within other URLs, requiring the callback URL itself to be encoded. When something goes wrong, you end up with a deeply nested encoded URL like redirect_uri=https%3A%2F%2Fapp.example.com%2Fcallback%3Fstate%3Dabc. Decode it to reconstruct the original redirect target and identify where the chain breaks.

Fixing double-encoded URLs in a web application

Your application shows %2520 in URLs instead of spaces. This is a classic double-encoding bug: the space was encoded to %20, then the percent sign was encoded again to %25, producing %2520. Paste the broken URL into the decoder, decode twice to confirm the issue, then trace through your code to find where encoding is being applied redundantly.

About this tool

Encode special characters for safe use in URLs or decode percent-encoded strings back to plain text. Supports both full URL encoding (encodeURI) and component encoding (encodeURIComponent) modes.

Common use cases

  • • Encoding query parameters that contain special characters like &, =, or spaces
  • • Decoding percent-encoded URLs from logs, analytics tools, or redirect chains
  • • Preparing strings for use in URL paths, query strings, or fragment identifiers
  • • Debugging double-encoded or malformed URLs in web applications

Frequently asked questions

What is the difference between encodeURI and encodeURIComponent?
encodeURI encodes a full URL but preserves characters that have meaning in URLs (like /, ?, #, &). encodeURIComponent encodes everything except unreserved characters, making it the right choice for encoding individual query parameter values.
Why do I need to URL-encode strings?
URLs can only contain a limited set of ASCII characters. Special characters like spaces, ampersands, and non-ASCII characters must be percent-encoded (e.g., space becomes %20) to be safely transmitted in URLs without being misinterpreted.
What is double encoding and how do I fix it?
Double encoding happens when an already-encoded string is encoded again (e.g., %20 becomes %2520). This tool can help you decode step by step to find the original value. To fix it, decode until you get the plain text, then encode once.
Why does my space become + in some cases and %20 in others?
There are two encoding conventions for spaces in URLs. Percent encoding (%20) is the standard defined in RFC 3986 for URI components. The plus sign (+) for spaces comes from the older application/x-www-form-urlencoded format used by HTML forms. In query strings, both are commonly accepted, but %20 is technically correct for URI components. JavaScript's encodeURIComponent uses %20, while the URLSearchParams API uses + for form-style encoding.
Which characters are safe in a URL without encoding?
RFC 3986 defines unreserved characters that never need encoding: uppercase and lowercase letters (A-Z, a-z), digits (0-9), hyphen (-), period (.), underscore (_), and tilde (~). Reserved characters like :, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, and = have special meaning in URL syntax and must be percent-encoded when used as literal data within a URL component.
How are non-ASCII characters like emojis or accented letters encoded in URLs?
Non-ASCII characters are first encoded to their UTF-8 byte sequence, then each byte is percent-encoded individually. For example, the character "e" with an acute accent is UTF-8 bytes C3 A9, which becomes %C3%A9 in the URL. An emoji like the rocket character is 4 UTF-8 bytes and becomes four percent-encoded values. Modern browsers display the decoded characters in the address bar for readability, but the underlying request uses the percent-encoded form.