encodeURI vs encodeURIComponent
Same input, two outputs. Use component encoding for query values. Use encodeURI only when you must keep a whole URL’s slashes and colons.
How to use the encodeURI vs encodeURIComponent
What does the encodeURI vs encodeURIComponent do?
Paste a string and see encodeURI and encodeURIComponent at once; It applies this page-specific rule: javaScript ships two percent-encoders.
Which inputs does this tool use?
To paste a string and see encodeuri and encodeuricomponent at once, enter Full URL or text to encode, encodeURI, encodeURIComponent; keep every value in the same example; the page then updates the result from the current values; Start with a familiar case covered by this rule - The usual bug is calling encodeURI on a search term that contains & - so the expected result can confirm the settings.
How should the tool result be read?
For a result intended to paste a string and see encodeuri and encodeuricomponent at once, the usual bug is calling encodeURI on a search term that contains &; read encodeuricomponent together with the original full url or text to encode rather than as an isolated answer, and confirm that its units or structure match the intended use.
Which one for a query parameter?
When the goal is to paste a string and see encodeuri and encodeuricomponent at once, encodeURIComponent.
Which one for a full https URL?
When using the page to paste a string and see encodeuri and encodeuricomponent at once, encodeURI, and even then only if you already have a valid URL.
Limits and accuracy
When using this tool to paste a string and see encodeuri and encodeuricomponent at once, decoding is not on this page; check the result in its intended destination before relying on it for important work; keep full url or text to encode until the output has been checked in its intended destination. For a repeatable check when you need to paste a string and see encodeuri and encodeuricomponent at once, record Full URL or text to encode alongside the final output and selected options.
How this works
JavaScript ships two percent-encoders. encodeURI is meant for a complete URL: it leaves : / ? # [ ] @ ! $ & ' ( ) * + , ; = intact. encodeURIComponent is meant for one value you will drop into a query or path segment, so those characters become % sequences.
The usual bug is calling encodeURI on a search term that contains &. The ampersand stays literal and splits the query. This page prints both results so you can see the difference instead of reading a table.
Decoding is not on this page. The URL encode tool decodes encodeURIComponent output. Invalid sequences still fail the same way in both APIs.
Frequently asked questions
Which one for a query parameter?
encodeURIComponent. Always.
Which one for a full https URL?
encodeURI, and even then only if you already have a valid URL. Building URLs from parts should encode each part separately.
What about encodeURIComponent('*')?
Both leave * unescaped. That is in the spec.
Spaces?
Both become %20. Neither uses +.