How to encode HTML special characters in JavaScript?

Question

The encodeURI() function encodes a URI by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two surrogate characters). Compared to encodeURIComponent(), this function encodes fewer characters, preserving those that are part of the URI syntax.

Table of Contents Show

How to convert HTML special characters in JavaScript?
How to encode all special characters in JavaScript?
How to encode HTML value in JavaScript?
How to escape HTML special characters in JavaScript?

encodeURI(uri)

uri

A string to be encoded as a URI.

A new string representing the provided string encoded as a URI.

URIError

Thrown if uri contains a .

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

The encodeURI() function escapes characters by UTF-8 code units, with each octet encoded in the format

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

; / ? : @ & = + $ , #

3, left-padded with 0 if necessary. Because lone surrogates in UTF-16 do not encode any valid Unicode character, they cause encodeURI() to throw a URIError.

encodeURI() escapes all characters except:

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

; / ? : @ & = + $ , #

The characters on the second line are characters that may be part of the URI syntax, and are only escaped by encodeURIComponent(). Both encodeURI() and encodeURIComponent() do not encode the characters

http://username:[email protected]:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor

0, known as "unreserved marks", which do not have a reserved purpose but are allowed in a URI "as is". (See RFC2396)

The encodeURI() function does not encode characters that have special meaning (reserved characters) for a URI. The following example shows all the parts that a URI can possibly contain. Note how certain characters are used to signify special meaning:

http://username:[email protected]:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor

encodeURI() differs from encodeURIComponent() as follows:

const set1 = ";/?:@&=+$,#"; // Reserved Characters
const set2 = "-.!~*'()"; // Unreserved Marks
const set3 = "ABC abc 123"; // Alphanumeric Characters + Space

console.log(encodeURI(set1)); // ;/?:@&=+$,#
console.log(encodeURI(set2)); // -.!~*'()
console.log(encodeURI(set3)); // ABC%20abc%20123 (the space gets encoded as %20)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
console.log(encodeURIComponent(set2)); // -.!~*'()
console.log(encodeURIComponent(set3)); // ABC%20abc%20123 (the space gets encoded as %20)

Note that encodeURI() by itself cannot form proper HTTP

http://username:[email protected]:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor

5 and

http://username:[email protected]:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor

6 requests, such as for

http://username:[email protected]:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor

7, because

http://username:[email protected]:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor

8,

http://username:[email protected]:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor

9, and

const set1 = ";/?:@&=+$,#"; // Reserved Characters
const set2 = "-.!~*'()"; // Unreserved Marks
const set3 = "ABC abc 123"; // Alphanumeric Characters + Space

console.log(encodeURI(set1)); // ;/?:@&=+$,#
console.log(encodeURI(set2)); // -.!~*'()
console.log(encodeURI(set3)); // ABC%20abc%20123 (the space gets encoded as %20)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
console.log(encodeURIComponent(set2)); // -.!~*'()
console.log(encodeURIComponent(set3)); // ABC%20abc%20123 (the space gets encoded as %20)

0 are not encoded, which are treated as special characters in

http://username:[email protected]:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor

5 and

http://username:[email protected]:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor

6 requests. encodeURIComponent(), however, does encode these characters.

An 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
encodeURI("\uD800\uDFFF"); // "%F0%90%8F%BF"

// Lone high surrogate throws "URIError: malformed URI sequence"
encodeURI("\uD800");

// Lone low surrogate throws "URIError: malformed URI sequence"
encodeURI("\uDFFF");

The more recent RFC3986 makes square brackets reserved (for IPv6) and thus not encoded when forming something which could be part of a URL (such as a host). It also reserves !, ', (, ), and *, even though these characters have no formalized URI delimiting uses. The following function encodes a string for RFC3986-compliant URL format.