encodeURIComponent()
escapes all characters except:
Not Escaped:
A-Z a-z 0-9 - _ . ! ~ * ' ( )
encodeURIComponent()
differs from encodeURI()
as follows:
const set1 = ";,/?:@&=+$";
const set2 = "-_.!~*'()";
const set3 = "#";
const set4 = "ABC abc 123";
console.log(encodeURI(set1));
console.log(encodeURI(set2));
console.log(encodeURI(set3));
console.log(encodeURI(set4));
console.log(encodeURIComponent(set1));
console.log(encodeURIComponent(set2));
console.log(encodeURIComponent(set3));
console.log(encodeURIComponent(set4));
Note that a URIError
will be thrown if one attempts to encode a surrogate which is not part of a high-low pair, e.g.,
console.log(encodeURIComponent("\uD800\uDFFF"));
console.log(encodeURIComponent("\uD800"));
console.log(encodeURIComponent("\uDFFF"));
Use encodeURIComponent()
on user-entered fields from forms POST
'd to the server. This will encode &
symbols that may inadvertently be generated during data entry for special HTML entities or other characters that require encoding/decoding.
For example, if a user writes Jack & Jill
, the text may get encoded as 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 +
.
To be more stringent in adhering to RFC 3986 (which reserves !, ', (, ), and *), even though these characters have no formalized URI delimiting uses, the following can be safely used:
function fixedEncodeURIComponent(str) {
return encodeURIComponent(str).replace(
/[!'()*]/g,
(c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
);
}