Percent-encode or decode text for use in URLs. Choose Full URL encoding to preserve reserved characters, or Component encoding to escape everything.
| Character | Name | Full URL | Component |
|---|---|---|---|
| (space) | Space | %20 | %20 |
| " | Double quote | %22 | %22 |
| # | Hash | # | %23 |
| $ | Dollar sign | $ | %24 |
| % | Percent | %25 | %25 |
| & | Ampersand | & | %26 |
| ' | Single quote | ' | ' |
| + | Plus | + | %2B |
| , | Comma | , | %2C |
| / | Forward slash | / | %2F |
| : | Colon | : | %3A |
| ; | Semicolon | ; | %3B |
| = | Equals | = | %3D |
| ? | Question mark | ? | %3F |
| @ | At sign | @ | %40 |
URL encoding — formally called percent-encoding — is a way of representing characters in a URL that would otherwise be unsafe, ambiguous, or reserved for a special purpose. A URL can technically only contain a limited set of ASCII characters safely: letters, digits, and a handful of punctuation marks. Anything outside that set — spaces, non-ASCII characters like é or 中, or characters that have special meaning in URL syntax (like & or ?) — gets replaced with a '%' followed by the character's two-digit hexadecimal byte value, so a space becomes %20 and an ampersand becomes %26.
This matters because URLs are structured text: a browser or server parses a URL by looking for specific delimiter characters (? starts the query string, & separates parameters, # starts a fragment), so if your actual data happens to contain one of those characters unencoded, it gets misinterpreted as part of the URL's structure instead of as literal data. Percent-encoding solves this by escaping any character that could be confused with URL syntax, guaranteeing the receiving system reconstructs your original data exactly, character for character.
JavaScript (and this tool) offers two distinct encoding functions because a full URL and a single piece of data within a URL need different treatment. encodeURI (Full URL mode) is meant for encoding an entire, already-structured URL — it leaves reserved characters like :, /, ?, #, &, and = untouched, because those characters are doing their job as URL syntax and shouldn't be escaped. It only encodes characters that are genuinely unsafe anywhere in a URL, like spaces and non-ASCII characters.
encodeURIComponent (Component mode) is meant for encoding a single value that will be inserted into a URL — a query parameter's value, a path segment, a form field — and it escapes nearly everything except unreserved characters (letters, digits, and - _ . ! ~ * ' ( )), including the reserved characters that Full mode leaves alone. Using the wrong mode is one of the most common URL-encoding bugs: encoding a whole URL with Component mode breaks it by escaping the protocol's // and the query string's separators.
RFC 3986, the URI specification, defines two categories of characters. Unreserved characters — uppercase and lowercase letters, digits, and the four symbols - _ . ~ — are always safe to use literally anywhere in a URL and never need encoding, since they have no special syntactic meaning. Reserved characters — including : / ? # [ ] @ ! $ & ' ( ) * + , ; = — do have special meaning in at least one part of URL syntax, but that meaning only applies when they're used in their structural role.
This is exactly why the same character can be encoded differently depending on context: a / used to separate path segments should stay literal, but a literal / that happens to appear inside a piece of data needs to be encoded to %2F so it isn't mistaken for a path separator. This context-dependence is the whole reason Full URL and Component encoding exist as separate modes — there's no single 'correct' encoding for a reserved character in isolation, only a correct encoding for the role it's playing.
The most frequent mistake is using the wrong encoding scope: running an entire URL through Component encoding escapes the protocol separator (://), path slashes, and query string delimiters, producing a string that's no longer a valid, working URL at all. The opposite mistake — forgetting to encode a value at all before inserting it into a query string — is just as common, and can silently break the URL or let user input inject unintended query parameters if the value happens to contain an & or =.
Another frequent issue is double-encoding: running already-encoded text through the encoder again, which turns a legitimate %20 into %2520 (since the % itself gets re-encoded to %25). This typically happens when a value passes through more than one layer of URL handling that each apply their own encoding without checking whether it's already encoded. Finally, developers sometimes confuse URL encoding with representing a space as a '+' — that convention is specific to HTML form submissions, not encodeURIComponent's standard output, which always uses %20 for spaces.
URL Encoder/Decoder handles one specific encoding format. These related developer tools cover the others you'll run into alongside URLs and web data.