URL Encoder — Percent-Encode Text & URLs
Encode any text or URL using percent-encoding (RFC 3986) with support for both encodeURIComponent and encodeURI. Instantly see the URL anatomy breakdown, compare encoding modes side-by-side, and batch-process multiple URLs. Used by developers, SEOs, and anyone building links with special characters.
How to Use the URL Encoder
- Paste your text or URL into the Encode tab input field.
- Choose encodeURIComponent to encode a query parameter value, or encodeURI to encode a full URL while preserving its structure.
- The encoded result appears instantly. If the input is a valid URL, the anatomy breakdown shows scheme, host, path, query, and fragment color-coded.
- A diff note highlights which characters differ between the two encoding modes.
- Use the Decode tab to reverse percent-encoded strings back to readable text.
- Use the Batch tab to encode or decode multiple URLs at once, one per line.
Key Features
- Live encoding using
encodeURIComponentorencodeURI - Visual diff showing which characters are encoded differently between the two modes
- URL anatomy breakdown — scheme, host, path, query, and fragment color-coded
- Decoding using
decodeURIComponentwith error handling for malformed sequences - Batch mode: encode or decode multiple URLs in one operation
- Live update as you type — no button clicks needed
- One-click copy for encoded and decoded output
Use Cases
Encode query parameter values for API calls
When building URLs with user-supplied data — search queries, category names, tags — use encodeURIComponent to ensure characters like &, =, +, and spaces do not break the URL structure. This is the most common use case for URL encoding in web development.
Encode UTM parameters with special characters
UTM campaign values often contain spaces, slashes, and ampersands. Paste the raw value here, encode it with encodeURIComponent, and use the result in your UTM-tagged URL to ensure analytics platforms parse the parameters correctly.
Decode percent-encoded URLs from server logs
Apache and Nginx server access logs record requests in percent-encoded form. Switch to the Decode tab and paste log entries to read the original human-readable paths and query strings without manually looking up each %XX sequence.
Batch encode a list of redirect destination URLs
When configuring redirect rules or building a URL shortener, you often need to encode multiple destination URLs. Use the Batch tab to paste your list and get all encoded results in seconds rather than encoding each URL individually.
Understand encodeURIComponent vs encodeURI for interviews
A common JavaScript interview question is the difference between the two encoding functions. Toggle between modes on any input to see exactly which characters each one encodes — the diff note provides a clear, instant explanation with real examples.
FAQ's
Both represent a space, but in different contexts. %20 is the RFC 3986 percent-encoding for a space and is valid in any part of a URL. The + character represents a space only within the application/x-www-form-urlencoded format used by HTML form submissions. For query parameters built with JavaScript, always use %20 via encodeURIComponent.
Use encodeURIComponent when encoding individual values — query parameter keys and values, path segments containing user data, or fragment identifiers. It encodes structural URL characters like /, ?, &, and =. Use encodeURI only when encoding a full URL you want to preserve — it leaves those structural characters untouched.
No. The fragment (the part after #) is processed by the browser only and is never sent to the server in the HTTP request. It is used for in-page navigation anchors and single-page application routing. This is why server-side redirects cannot read or act on the fragment portion of a URL.
Characters outside the unreserved set (A-Z a-z 0-9 - _ . ~) must be percent-encoded when used as data rather than URL delimiters. Reserved characters (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) have structural meaning in URLs — they must be encoded when they appear as data values rather than as separators.
Yes. encodeURIComponent correctly handles Unicode by first converting characters to their UTF-8 byte representation, then percent-encoding each byte. For example, the Japanese character 東 (U+6771) becomes %E6%9D%B1 because its UTF-8 encoding is the three bytes E6, 9D, and B1. This is the correct approach for Internationalized Resource Identifiers (IRIs).
Browsers differ in how they display URLs in the address bar — some decode them for readability while others show the raw encoded form. The actual HTTP request always uses the encoded form. When copying URLs from the address bar, use right-click → "Copy link address" to get the raw encoded URL, which you can then decode here to read the original content.
Use encodeURIComponent on the entire URL string. This encodes the ://, /, ?, and & characters that would otherwise be interpreted as part of the outer URL's structure. For example, a redirect URL passed as a query parameter must be fully encoded: ?redirect=https%3A%2F%2Fexample.com%2Fpage.
This error from decodeURIComponent means the input contains a malformed sequence — a lone % not followed by exactly two valid hexadecimal digits, or a multi-byte sequence that does not form valid UTF-8. Try decoding a smaller portion of the string to identify the problematic sequence.
URL encoding is one of those tasks developers do constantly but rarely think about until something breaks — a 404 from a path with a space, a broken query string with an unescaped ampersand, or an OAuth redirect that fails because the callback URL was not properly encoded. Toolaroid's URL Encoder removes the friction: paste any string, get the correct encoded output instantly, and use the URL anatomy breakdown to understand exactly what each part of a URL does. The batch mode handles bulk operations for redirect rule creation, sitemap building, and log analysis at scale.