URL Encoder / Decoder: Component and Full URI Modes, Explained
JavaScript actually gives you two different URL-encoding functions, and picking the wrong one is a common source of broken links: encodeURIComponent for a single parameter value, and encodeURI for an entire URL. This tool lets you toggle between both modes so you always use the right one.
encodeURI additionally preserves : / ? # [ ] @ & = + $ , since those are structural URL characters.
The Mistake Most Encoders Make
A single 'URL encode' button that always uses encodeURIComponent will happily mangle a full URL — turning 'https://example.com/search?q=cats' into 'https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dcats', which no browser or server will parse as a link. That's why this tool separates the two use cases explicitly.
When to Use Component Mode
Use Component mode whenever you're encoding a single value that will become part of a query string or path segment — a search term, a redirect URL you're passing as a parameter, or any user input. It ensures reserved characters like '&' or '=' inside that value don't get misinterpreted as URL syntax.
When to Use Full URI Mode
Use Full URI mode when you're encoding an entire, already-structured URL and only want to escape characters that are actually invalid in a URL (like spaces or non-ASCII characters), while preserving the ':', '/', '?', and '#' that give the URL its structure.
Practical Examples
Encoding a Redirect Parameter
Passing a full URL as a single query value.
- 1.Mode: Component
- 2.Input: https://app.com/dashboard?tab=1
- 3.Output: https%3A%2F%2Fapp.com%2Fdashboard%3Ftab%3D1
- 4.Used as: ?redirect=
Encoding an Entire URL with a Space
Preparing a URL with a non-ASCII path segment.
- 1.Mode: Full URI
- 2.Input: https://example.com/my file.pdf
- 3.Output: https://example.com/my%20file.pdf
- 4.Structure (://,/) preserved
Characters Preserved by Full URI Mode
- : and /: protocol and path separators
- ? and #: query and fragment markers
- & and =: query parameter syntax
- @: userinfo separator
Characters Always Encoded (Both Modes)
- Space: becomes %20
- Non-ASCII characters: multi-byte UTF-8 percent-encoding
- Quotes and angle brackets: ", ', <, >
- Percent sign itself: %25 (when not part of valid encoding)
Frequently Asked Questions
What's the difference between Component and Full URI mode?
Component mode (encodeURIComponent) escapes everything except A-Z, a-z, 0-9, and -_.~ — correct for a single parameter value that might itself contain URL-reserved characters. Full URI mode (encodeURI) leaves characters like :/?#[]@&=+$, alone since those are structural parts of a complete URL.
Why would encoding a full URL with Component mode break it?
Component mode would encode the '://' and '/' in 'https://example.com/path', turning it into an unusable string like 'https%3A%2F%2Fexample.com%2Fpath' — that's why Full URI mode exists for encoding an entire URL rather than one piece of it.
What does 'Use as Input' do?
It takes the current output and feeds it back in as the new input while flipping the direction (encode becomes decode and vice versa), letting you quickly verify a round-trip conversion.
Why did decoding show an error?
decodeURIComponent/decodeURI throw when they encounter a malformed percent-encoding sequence — like a lone '%' not followed by two valid hex digits. That usually means the input wasn't actually encoded, or was truncated.
Does this handle non-ASCII characters like accented letters or emoji?
Yes. Both encoding functions work over UTF-8, so characters like 'é' or emoji are correctly represented as multi-byte percent-encoded sequences.
Is this different from the site's other URL Encoder tool?
Yes — this version adds an explicit toggle between Component and Full URI encoding modes with guidance on which to use, instead of a single fixed encoding behavior.