encodeURI vs encodeURIComponent

Differences

1. encodeURI is used to encode a full URL.

   encodeURI('https://domain.com/path to a document.pdf');
   
   // 'https://domain.com/path%20to%20a%20document.pdf'

   Whereas encodeURIComponent is used for encoding a URI component such as a query string.

   `http://domain.com/?search=${encodeURIComponent('encode & decode param')}`
   
   // 'http://domain.com/?search=encode%20%26%20decode%20param'

2. There are 11 characters which are not encoded by encodeURI, but encoded by encodeURIComponent.
   The following snippet prints these characters:

   const arr = Array(256)
       .fill(0)
       .map((_, i) => String.fromCharCode(i))
       .filter(c => encodeURI(c) != encodeURIComponent(c));
   
   arr.forEach(c => console.log(c, encodeURI(c), encodeURIComponent(c)));

   Here is the list of those characters:

   Character	encodeURI	encodeURIComponent
   #	#	%23
   $	$	%24
   &	&	%26
   +	+	%2B
   ,	,	%2C
   /	/	%2F
   :	:	%3A
   ;	;	%3B
   =	=	%3D
   ?	?	%3F
   @	@	%40

Good to know

1. decodeURI and decodeURIComponent are methods to decode a string that is encoded by encodeURI and encodeURIComponent respectively.
2. encodeURIComponent does not encode -_.!~*'(). If you want to these characters are encoded, you have to replace them with corresponding UTF-8 sequence of characters:

   const encode = str => encodeURIComponent(str)
       .replace(/\-/g, '%2D')
       .replace(/\_/g, '%5F')
       .replace(/\./g, '%2E')
       .replace(/\!/g, '%21')
       .replace(/\~/g, '%7E')
       .replace(/\*/g, '%2A')
       .replace(/\'/g, '%27')
       .replace(/\(/g, '%28')
       .replace(/\)/g, '%29');
   
   encode("What's result of (4 + 2)?");    // "What%27s%20result%20of%20%284%20%2B%202%29%3F"

   The decoding function could look like as follow:

   const decode = str => decodeURIComponent(
       str
       .replace(/\%2D/g, '-')
       .replace(/\%5F/g, '_')
       .replace(/\%2E/g, '.')
       .replace(/\%21/g, '!')
       .replace(/\%7E/g, '~')
       .replace(/\%2A/g, '*')
       .replace(/\%27/g, "'")
       .replace(/\%28/g, '(')
       .replace(/\%29/g, ')')
   );
   
   decode('What%27s%20result%20of%20%284%20%2B%202%29%3F');    // "What's result of (4 + 2)?"