URL Encoder / Decoder

Complete Guide to URL Encoding and Decoding

URLs are the foundation of web navigation, but they have strict rules about which characters they can contain. When you need to pass dynamic data — search queries, user names, redirect targets, tracking parameters — through a URL, those values must be encoded so they do not break the link or get misinterpreted by browsers and servers. This process is called percent-encoding or URL encoding, and it is an essential skill for every web developer, marketer, and API integrator.

ToolsFree.org offers a free, client-side URL encoder and decoder that supports multiple encoding modes. Your links and text never leave your browser, making it safe to encode sensitive redirect URLs, OAuth callbacks, and campaign parameters. This guide explains how URL encoding works, when to use each mode, and how to avoid the most common mistakes.

Why URL Encoding Exists

A URL has structural components: scheme (https://), host (example.com), path (/search), query string (?q=hello), and fragment (#section). Certain characters are reserved because they define this structure. The question mark starts the query string. The ampersand separates parameters. The equals sign connects keys and values. The hash starts the fragment.

If your data contains any of these reserved characters — or spaces, Unicode letters, or symbols — they must be encoded as a percent sign followed by two hexadecimal digits. A space becomes %20. An ampersand becomes %26. The letter é becomes %C3%A9 in UTF-8 encoding. Without this transformation, a search for "fish & chips" could break the URL parser or truncate the query at the ampersand.

encodeURIComponent vs encodeURI: Which Mode to Use

JavaScript provides two encoding functions, and this tool supports both. encodeURIComponent (our "Encode component" mode) encodes every character except unreserved characters: A–Z, a–z, 0–9, hyphen, underscore, period, and tilde. Use this mode for individual query parameter values. For example, encoding the search term in ?q=hello world should encode only the value, producing ?q=hello%20world.

encodeURI (our "Encode full URI" mode) preserves URL structure characters: colon, slash, question mark, hash, and at sign. Use this when you have a complete URL with dynamic segments that need encoding but structural characters must remain intact. For example, encoding a full URL with spaces in the path without breaking the :// or directory slashes.

Decode mode reverses percent-encoding using decodeURIComponent, turning encoded sequences back into readable text. Use this to inspect URLs from server logs, analytics reports, or encoded email links.

Step-by-Step: Building a Campaign URL

Marketing teams use UTM parameters to track traffic sources in Google Analytics. A typical campaign URL might look like: https://yoursite.com/landing?utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale. If the campaign name contains spaces or special characters, each value must be encoded individually.

Start with your base URL. For each parameter value, paste it into this tool in Encode component mode. Copy the encoded value back into your URL. Assemble the final link: base + ?utm_source= + encoded source + &utm_medium= + encoded medium, and so on. Test the final URL in an incognito browser window before launching the campaign.

URL Encoding in OAuth and SSO Integrations

OAuth 2.0 and OpenID Connect require precise redirect URI encoding. When registering a callback URL like https://app.example.com/auth/callback?provider=google, the entire redirect URI must match exactly between your application registration and the authorization request. Query parameters within redirect URIs must be properly encoded.

Common OAuth errors — "redirect_uri_mismatch" or "invalid_request" — often trace back to encoding issues. A redirect URI registered with unencoded characters but sent with encoded characters (or vice versa) will fail validation. Use this decoder to inspect the exact redirect URI your application sends, character by character.

International URLs and Unicode

Modern browsers support Internationalized Domain Names (IDN) and Unicode in URL paths and query strings. Non-ASCII characters must be encoded as UTF-8 bytes, then percent-encoded. The Japanese word for "hello" (こんにちは) becomes a sequence of percent-encoded bytes. This tool handles UTF-8 correctly because it operates on Unicode strings in the browser.

When building multilingual applications, always encode user-generated content in URLs regardless of language. Never assume ASCII-only input — your users will eventually paste emoji, accented characters, or CJK text into search fields.

Common URL Encoding Mistakes

Double encoding is the most frequent error. If a value is already encoded (hello%20world) and you encode it again, the percent sign itself gets encoded to %25, producing hello%2520world — which decodes to hello%20world instead of hello world. Always check whether input is already encoded before processing.

Encoding the entire URL with encodeURIComponent breaks structural characters. The colons and slashes in https:// get encoded, producing an unusable string. Use encodeURI for full URLs and encodeURIComponent for individual values.

Using + for spaces works in some contexts (HTML form submission with application/x-www-form-urlencoded) but not in all URL parsers. Percent-encoding spaces as %20 is the safe, universal approach.

URL Encoding in Different Programming Languages

Every major language provides URL encoding utilities. JavaScript uses encodeURIComponent() and decodeURIComponent(). PHP uses urlencode() and urldecode() for form data, or rawurlencode() for RFC 3986 compliance. Python uses urllib.parse.quote() and quote_plus(). Java uses URLEncoder.encode(). Ruby uses URI.encode_www_form_component.

When debugging cross-language integrations, use this tool as a reference. Encode a test value here, then compare with your server-side output. Discrepancies in space encoding (+ vs %20) or slash handling often explain mysterious 400 Bad Request errors.

Security Considerations

URL encoding is not encryption. Encoding an API key or password in a URL does not protect it — anyone can decode it instantly. Never pass secrets in URL query parameters when avoidable; use HTTP headers or request bodies instead. When URLs with sensitive data must be logged, redact or hash the values.

URL encoding also plays a role in preventing injection attacks. Properly encoding user input before inserting it into URLs prevents attackers from injecting additional query parameters or path segments. Always encode on output, not decode on input — validate and sanitize data at the application layer as well.