What is URL encoding?
URL encoding, also called percent-encoding, replaces characters that are not allowed or are ambiguous in a URI with a percent sign followed by two hexadecimal digits. A space becomes %20, an ampersand becomes %26, and non-ASCII Unicode characters are converted to UTF-8 bytes first, then each byte is percent-encoded.
Browsers and HTTP clients apply encoding automatically in many cases, but developers still need to encode and decode manually when building query strings, debugging redirect URLs, writing API clients, or inspecting log entries. Getting it wrong produces broken links, double- encoded values, or servers that cannot parse parameters correctly.
This free URL encoder and decoder supports both JavaScript encoding modes: component (encodeURIComponent) for individual values, and full URI (encodeURI) for complete URLs. Switch between encode and decode, paste your text, click Convert, and copy the result. Everything runs in your browser.
How to use the URL encoder and decoder
- Pick Encode or Decode using the mode tabs at the top of the tool.
- Choose an encoding type. Select Component for query values and path segments, or Full URI when encoding an entire URL where structural characters like
?and=must stay in place. - Paste your input in the left panel. Use Load sample to try a realistic example.
- Click Convert and review the output on the right. Errors appear above the button if decoding fails.
- Copy the result with the Copy button when you are ready to paste it into your code, logs, or browser address bar.
Examples
Component encoding a query value
Input: hello world?foo=bar&baz=qux
Output: hello%20world%3Ffoo%3Dbar%26baz%3DquxEvery special character is escaped. This is what you want when setting searchParams.append('q', value) in JavaScript or building a query string by hand.
Full URI encoding
Input: https://example.com/a file?name=Ada Lovelace
Output: https://example.com/a%20file?name=Ada%20LovelaceSpaces are encoded, but ? and = remain because they are valid URI delimiters. Use this mode when the input is a mostly complete URL and you only need to fix illegal characters.
encodeURI vs encodeURIComponent in practice
A common bug is calling encodeURIComponent on an entire URL. That encodes the slashes in https://, the question mark before query parameters, and the equals signs between keys and values - producing a string that is no longer a valid URL. The fix is to encode each parameter value separately, then join them with &.
Conversely, using encodeURI on a parameter value that contains & or = will leave those characters unescaped, which can break the query string when the value is concatenated into a larger URL. Match the encoding function to the scope of what you are encoding: whole URL vs single value.
Double encoding and other mistakes
- Double encoding. Running encode twice turns
%20into%2520. Decode once to check whether a value was already encoded before encoding again. - Plus signs in query strings. HTML forms sometimes send spaces as
+. JavaScript decoders treat+as a literal plus, not a space. Replace+with%20if your input came from application/x-www-form-urlencoded data. - Unicode and emoji. Modern browsers encode UTF-8 correctly. If you see mojibake after decoding, the original may have been encoded with the wrong charset.
- Mode mismatch on decode. Always decode with the same function that encoded the string. A value encoded with
encodeURIComponentshould be decoded withdecodeURIComponent.
Related tools for web developers
URL work often sits alongside other encoding and formatting tasks. Use the Base64 Encoder Decoder when payloads are Base64-wrapped rather than percent-encoded. Format nested JSON responses with the JSON Formatter before hunting for encoded fields. Test extraction patterns with the Regex Tester when log lines mix plain text and encoded segments.
Keeping a reliable encoder and decoder in the browser saves time during incident response, API integration, and frontend debugging - especially when you cannot run curl or scripting tools on a locked-down machine. Bookmark this page for quick, private conversions any time a URL does not behave as expected.