The encodeURIComponent() function encodes a encodeURI(), this function encodes more characters, including those that are part of the URI syntax.
The encodeURIComponent() function encodes a encodeURI(), this function encodes more characters, including those that are part of the URI syntax.
/ Encodes characters such as ?,=,/,&,:
console.log(`?x=${encodeURIComponent("test?")}`);
/ Expected output: "?x=test%3F"
console.log(`?x=${encodeURIComponent("шеллы")}`);
/ Expected output: "?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"
encodeURIComponent(uriComponent)
uriComponentA string to be encoded as a URI component (a path, query string, fragment, etc.). Other values are converted to strings.
A new string representing the provided uriComponent encoded as a URI component.
URIErrorThrown if uriComponent contains a lone surrogate.
encodeURIComponent() is a function property of the global object.
encodeURIComponent() uses the same encoding algorithm as described in encodeURI(). It escapes all characters except:
A–Z a–z 0–9 - _ . ! ~ * ' ( )
Compared to character references or other characters that require encoding/decoding. For example, if a user writes Jack & Jill, without encodeURIComponent(), the ampersand could be interpreted on the server as the start of a new field and jeopardize the integrity of the data.
For application/x-www-form-urlencoded, spaces are to be replaced by +, so one may wish to follow a encodeURIComponent() replacement with an additional replacement of %20 with +.
The following example provides the special encoding required within UTF-8 Link server response header parameters (e.g., UTF-8 filenames):
const fileName = "my file(2).txt";
const header = `Content-Disposition: attachment; filename*=UTF-8''${encodeRFC5987ValueChars(
fileName,
)}`;
console.log(header);
/ "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"
function encodeRFC5987ValueChars(str) {
return (
encodeURIComponent(str)
/ The following creates the sequences %27 %28 %29 %2A (Note that
/ the valid encoding of "*" is %2A, which necessitates calling
/ toUpperCase() to properly encode). Although RFC3986 reserves "!",
/ RFC5987 does not, so we do not need to escape it.
.replace(
/['()*]/g,
(c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
)
/ The following are not required for percent-encoding per RFC5987,
/ so we can allow for a little better readability over the wire: |`^
.replace(/%(7C|60|5E)/g, (str, hex) =>
String.fromCharCode(parseInt(hex, 16)),
)
);
}
The more recent RFC3986 reserves !, ', (, ), and *, even though these characters have no formalized URI delimiting uses. The following function encodes a string for RFC3986-compliant URL component format. It also encodes [ and ], which are part of the encodeURI() example.
function encodeRFC3986URIComponent(str) {
return encodeURIComponent(str).replace(
/[!'()*]/g,
(c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
);
}
A URIError will be thrown if one attempts to encode a surrogate which is not part of a high-low pair. For example:
/ High-low pair OK
encodeURIComponent("\uD800\uDFFF"); / "%F0%90%8F%BF"
/ Lone high-surrogate code unit throws "URIError: malformed URI sequence"
encodeURIComponent("\uD800");
/ Lone high-surrogate code unit throws "URIError: malformed URI sequence"
encodeURIComponent("\uDFFF");
You can use String.prototype.isWellFormed() to check if a string contains lone surrogates before passing it to encodeURIComponent().
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-encodeuricomponent-uricomponent |