uriComponent

A string to be encoded as a URI component (a path, query string, fragment, etc.). Other values areconverted to strings.

A new string representing the provideduriComponent encoded as a URI component.

URIError

Thrown ifuriComponent contains alone surrogate.

encodeURIComponent() is a function property of the global object.

encodeURIComponent() uses the same encoding algorithm as described inencodeURI(). It escapes all charactersexcept:

A–Z a–z 0–9 - _ . ! ~ * ' ( )

Compared toencodeURI(),encodeURIComponent() escapes a larger set of characters. UseencodeURIComponent() on user-entered fields from forms sent to the server — this will encode& symbols that may inadvertently be generated during data entry forcharacter references or other characters that require encoding/decoding. For example, if a user writesJack & Jill, withoutencodeURIComponent(), the ampersand could be interpreted on the server as the start of a new field and jeopardize the integrity of the data.

Forapplication/x-www-form-urlencoded, spaces are to be replaced by+, so one may wish to follow aencodeURIComponent() replacement with an additional replacement of%20 with+.

The following example provides the special encoding required within UTF-8Content-Disposition andLink 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 recentRFC3986 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 theIPv6 URI syntax. An RFC3986-compliantencodeURI implementation should not escape them, which is demonstrated in theencodeURI() example.

function encodeRFC3986URIComponent(str) {  return encodeURIComponent(str).replace(    /[!'()*]/g,    (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,  );}

AURIError will be thrown if one attempts to encode a surrogate which is not part of a high-low pair. For example:

// High-low pair OKencodeURIComponent("\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 useString.prototype.toWellFormed(), which replaces lone surrogates with the Unicode replacement character (U+FFFD), to avoid this error. You can also useString.prototype.isWellFormed() to check if a string contains lone surrogates before passing it toencodeURIComponent().

• decodeURI()
• encodeURI()
• decodeURIComponent()