Overview
Introduction
URLs can only safely contain a limited set of characters. The moment you need to pass a space, an ampersand, or a non-ASCII letter as part of a query string or path, it needs percent-encoding first, or the URL risks being misread or broken by the browser, a proxy, or the server.
This matters most when you're building a URL by hand rather than through a library that handles it for you: constructing a redirect link, a share URL, or a query parameter in a script or curl command where a stray space or & would silently truncate the value.
What Is URL Encoder?
URL encoding (percent-encoding) replaces unsafe or reserved characters with a % followed by their two-digit hexadecimal byte value, so a space becomes %20 and a slash becomes %2F.
Only unreserved characters, letters, digits, and - _ . ~, are guaranteed to pass through untouched. Everything else, including characters reserved for URL syntax like & and =, gets escaped when it appears inside a value rather than as structural punctuation.
How URL Encoder Works
The tool passes your input through the browser's native encodeURIComponent function, which UTF-8 encodes each character and escapes everything except unreserved characters (A-Z, a-z, 0-9, and - _ . ~). Because it runs locally, there's no size limit beyond your browser's own memory.
Non-ASCII characters are handled by first converting them to their UTF-8 byte representation and then percent-encoding each byte individually, which is why a single accented letter or emoji can expand into multiple %XX sequences in the output.
When To Use URL Encoder
Use it when building a query string parameter by hand, embedding user-supplied text in a redirect URL, or debugging why a link with special characters isn't working as expected.
It also works as a quick sanity check before shipping code that builds URLs manually: encode the trickiest value you expect (spaces, &, non-ASCII text) and confirm the output matches what your own encodeURIComponent call would produce.
Often used alongside URL Decoder.
Features
Advantages
- Runs entirely client-side, so there's no server round trip for a simple text transform.
- Matches exactly what encodeURIComponent produces in your own JavaScript code, so there's no surprise at runtime.
- Handles non-ASCII text correctly by encoding its UTF-8 byte representation.
Limitations
- Encodes an entire string as one component - it won't selectively leave already-encoded parts alone, so re-encoding an encoded string will double-encode it.
- Not meant for encoding a complete URL; use it per query parameter or path segment instead.
URL Encoding vs. Base64 Encoding
| URL encoding (this tool) | Base64 encoding | |
|---|---|---|
| Alphabet used | ASCII plus %XX sequences | A-Z, a-z, 0-9, +, /, = |
| Safe to drop directly into a URL | Yes, that's its purpose | No, may contain + and / |
| Output size vs. input | Grows only for unsafe characters | About 33% larger |
| Typical use | Query strings, form values | Basic Auth headers, JWTs, embedding binary data |
Examples
Best Practices & Notes
Best Practices
- Encode each query parameter value individually before assembling the full URL, not the whole URL at once.
- Decode on the receiving end with the matching decoder to avoid double-encoding bugs.
- Prefer your language's built-in encoder in production code; this tool is for quick manual checks and debugging.
- When a value that's itself a full URL needs to travel as a query parameter, a redirect target, for example, encode that inner URL as a single component rather than trying to encode only parts of it.
- Check the decoded round-trip after encoding a value with unusual characters (quotes, ampersands, non-ASCII text) to catch encoding mistakes before they reach production.
- Avoid re-encoding values that a framework, HTTP client, or router already encodes automatically; encoding twice is a frequent cause of literal %20 or %2B showing up where a space or plus was expected.
Developer Notes
This wraps the native encodeURIComponent function with no additional escaping rules layered on top, so its output is identical to what you'd get calling it directly in a browser console. Internally, encodeURIComponent first converts the input string to its UTF-8 byte sequence, then replaces every byte outside the unreserved set (and outside !*'()) with %XX, where XX is the byte's two-digit uppercase hexadecimal value. Multi-byte UTF-8 characters therefore always produce multiple consecutive %XX sequences in the output, never a single one.
URL Encoder Use Cases
- Building a query string parameter by hand while debugging an API call
- Embedding a redirect URL as a value inside another URL
- Checking why a link containing spaces or symbols breaks when pasted somewhere
- Constructing OAuth redirect URIs and state parameters that must survive being embedded inside another URL
- Preparing a search query or filter value for a REST API endpoint that expects percent-encoded parameters
Common Mistakes
- Encoding a full URL instead of just the parameter values, which breaks the scheme and path separators.
- Encoding a string twice, which turns a literal % into %2525 and corrupts the value.
- Assuming encodeURIComponent and encodeURI are interchangeable, when they escape different character sets for different purposes.
- Forgetting that a value already encoded by a framework, router, or HTTP client library doesn't need to be encoded again before being handed to it.
Tips
- If a decoded round-trip doesn't return your original text, check whether the input was already encoded once.
- Use the URL decode tool right after to sanity-check that your encoded value decodes back correctly.
- When debugging a broken link, count the %25 occurrences in it; each one is usually a sign of accidental double-encoding somewhere upstream.