What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use encodeURI() and decodeURI() for a complete URI; use encodeURIComponent() and decodeURIComponent() for one URI component, such as a query value or path segment. The right replacement depends on what the old code is encoding—not on a mechanical function-name swap.
Which replacement should you use?
| What you are handling | Use | Why |
|---|---|---|
| A complete URI whose structural delimiters should remain meaningful | encodeURI() and decodeURI() |
These encode and decode a complete URI while preserving characters with URI structure. |
| One URI component, such as a query value, path segment, or fragment value | encodeURIComponent() and decodeURIComponent() |
These encode component data, including delimiters such as ?, =, /, &, and :, so they are not mistaken for URI structure. |
How the functions differ
Complete URI: preserve its structure
encodeURI() is for a URI as a whole. It leaves URI syntax characters intact so that parts such as the scheme, path, and query delimiters can continue to function as structure. decodeURI() reverses that operation.
One component: treat delimiters as data
encodeURIComponent() encodes more characters than encodeURI(). This matters when a value supplied by a user contains characters such as & or =: within a query value, those characters should be data, not separators between parameters. Use decodeURIComponent() to decode a component encoded this way.
Migration examples
Encoding a complete URI
// Preserve the structure of a complete URI.
const uri = "https://example.test/search?q=шеллы";
const encodedUri = encodeURI(uri);
const decodedUri = decodeURI(encodedUri);Encoding a query value
// Encode delimiters inside the value so they remain data.
const queryValue = "a&b=c?";
const encodedValue = encodeURIComponent(queryValue); // a%26b%3Dc%3F
const decodedValue = decodeURIComponent(encodedValue);Pair the decode function with the encode function used for the same data. Before changing legacy code, identify whether it handled a complete URI, a URI component, or something unrelated to URI encoding.
#1 Best Overall
Why `escape()` and `unescape()` should be replaced
MDN marks unescape() as deprecated and advises, “Avoid using this feature in new projects.” MDN explains that TC39 places escape() and unescape() in ECMAScript Annex B, which covers features with “one or more undesirable characteristics” that would be removed in the absence of legacy usage. This describes deprecated legacy functionality, not a claim that browsers have universally removed the functions. Existing code may still rely on them, so check compatibility requirements while migrating.
The old functions use legacy hexadecimal behavior rather than the UTF-8 percent-encoding semantics used by modern URI functions. Consequently, substituting encodeURI() everywhere is not automatically equivalent: choose the replacement based on the data’s actual purpose.
Rank #2
Handle decoding errors
decodeURI() can throw a URIError if a percent escape is malformed or does not represent valid UTF-8. The matching component decoder can also fail on malformed encoded input. If decoded strings can come from external or untrusted sources, handle decoding errors rather than assuming every input is valid.
function safelyDecodeComponent(value) {
try {
return decodeURIComponent(value);
} catch (error) {
if (error instanceof URIError) {
// Decide how this application should reject or report invalid input.
}
throw error;
}
}These functions are not general-purpose escaping
- HTML: URI encoding does not make a string safe to insert into HTML. Use context-appropriate HTML handling.
- JavaScript strings: URI encoding is not a substitute for escaping a string literal in JavaScript source.
- Security or secrecy: Encoding is not encryption and does not conceal data.
Use URI encoding only when the value is being placed into a URI, and choose the function according to whether the value is the entire URI or one component.
Recommended Free Tools
Quick Recap
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
