When to Use encodeURI vs encodeURIComponent
Use encodeURI on a complete URL so reserved characters such as :/?#&=+ stay as delimiters. Use encodeURIComponent on one path segment or query value so those characters are encoded as data. Docify exposes both as Encode URI and Encode component. hello+world under Encode URI stays hello+world; Encode component writes hello%2Bworld. decodeURI leaves hello%2Bworld encoded; decodeURIComponent turns it into hello+world. Neither function is application/x-www-form-urlencoded. Nothing is uploaded.
JavaScript ships two percent-encoders with different reserved sets. Picking the wrong one either breaks the URL or leaves a delimiter inside a value. The examples below match the live URL encoder.
Developer use cases the tool actually covers
API query parameter values
Encode each value with Encode component, then join with literal ?, &, and =. Do not run Encode component on the assembled URL.
A callback URL as a query value
A redirect or state URL is one parameter. Encode component on https://example.com/callback produces the value you can place after redirect_uri=. The page does not implement OAuth, validate a redirect, or sign a state parameter.
A complete URL that only needs spaces escaped
Encode URI on a full URL leaves the structure alone and encodes spaces as %20. That is the same path as encoding query values when the box already holds the whole URL.
Practices that match this encoder
- ✓Encode the value, not the assembled URL — Encode component on user input before you concatenate it. Encode URI is for a URL that is already structured.
- ✓Do not double-encode — running Encode component twice turns
%20into%2520. The tool does not detect prior encoding. - ✓Decode with the matching function — Decode URI for a full URL, Decode component for a value. A malformed
%pair errors instead of a partial result. See Decode URL text with decodeURIComponent.
What this tool does not implement
application/x-www-form-urlencoded
Form bodies often look similar but treat a space as +. Docify always uses %20 and does not decode + as a space. The live encoder now names the plus convert examples: hello+world under Encode URI stays hello+world; Encode component writes hello%2Bworld. hello%2Bworld under Decode URI stays hello%2Bworld; Decode component yields hello+world. The sample below is form encoding, not what Encode component emits for a space.
RFC 3986 extra marks
Neither button encodes !'()*. That matches ECMA-262, not a stricter “encode everything except unreserved” helper. Letters, digits, and -_.~ also stay unescaped.
Compare encodeURI and encodeURIComponent
Two buttons, two reserved sets. Spaces are %20. Nothing is uploaded.
Use URL Encoder →FAQ
- Does this page upload the strings I test?
- No. The companion URL encoder runs encodeURI, encodeURIComponent, decodeURI, and decodeURIComponent in your browser. Nothing is sent to a server.
- When should I call encodeURI instead of encodeURIComponent?
- Call encodeURI on a complete URL so delimiters such as : / ? # & = stay as structure and only spaces and non-ASCII become percent sequences. Call encodeURIComponent on a single path segment or query value so those same characters are encoded as data.
- Can I use this tool to build application/x-www-form-urlencoded bodies?
- No. encodeURI and encodeURIComponent emit %20 for a space and do not treat + as a space on decode. Form-urlencoded bodies use + for a space and %2B for a literal plus. encodeURI("hello+world") is hello+world; encodeURIComponent of that same string is hello%2Bworld. decodeURI("hello%2Bworld") stays hello%2Bworld; decodeURIComponent of that same string is hello+world. Docify has no separate form-encoding mode.
- Will encodeURIComponent encode ! ' ( ) * ?
- No. Neither ECMA-262 function encodes those marks (historical RFC 2396). Letters, digits, and -_.~ also stay unescaped. A plus is reserved for encodeURI: hello+world stays hello+world; encodeURIComponent writes hello%2Bworld. decodeURI leaves hello%2Bworld encoded; decodeURIComponent turns it into hello+world.