Should I use encodeURI or encodeURIComponent for encoding URLs?

Which of these two methods should be used for encoding URLs?

It depends on what you are actually wanting to do.

encodeURI assumes that the input is a complete URI that might have some characters which need encoding in it.

encodeURIComponent will encode everything with special meaning, so you use it for components of URIs such as

var world = "A string with symbols & characters that have special meaning?";
var uri = 'http://example.com/foo?hello=' + encodeURIComponent(world);

If you're encoding a string to put in a URL component (a querystring parameter), you should call encodeURIComponent.

If you're encoding an existing URL, call encodeURI.

xkr.us has a great discussion, with examples. To quote their summary:

The escape() method does not encode the + character which is interpreted as a space on the server side as well as generated by forms with spaces in their fields. Due to this shortcoming and the fact that this function fails to handle non-ASCII characters correctly, you should avoid use of escape() whenever possible. The best alternative is usually encodeURIComponent().

escape() will not encode: @*/+

Use of the encodeURI() method is a bit more specialized than escape() in that it encodes for URIs as opposed to the querystring, which is part of a URL. Use this method when you need to encode a string to be used for any resource that uses URIs and needs certain characters to remain un-encoded. Note that this method does not encode the ' character, as it is a valid character within URIs.

encodeURI() will not encode: ~!@#$&*()=:/,;?+'

Lastly, the encodeURIComponent() method should be used in most cases when encoding a single component of a URI. This method will encode certain chars that would normally be recognized as special chars for URIs so that many components may be included. Note that this method does not encode the ' character, as it is a valid character within URIs.

encodeURIComponent() will not encode: ~!*()'

Here is a summary.

1. escape() will not encode @ * _ + - . /

   Do not use it.

2. encodeURI() will not encode A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

   Use it when your input is a complete URL like 'https://searchexample.com/search?q=wiki'

3. encodeURIComponent() will not encode A-Z a-z 0-9 - _ . ! ~ * ' ( ) Use it when your input is part of a complete URL e.g const queryStr = encodeURIComponent(someString)

encodeURI and encodeURIComponent are used for different purposes.
Some of the difference are

1. encodeURI is used to encode a full URL whereas encodeURIComponent is used for encoding a URI component such as a query string.

2. There are 11 characters which are not encoded by encodeURI, but encoded by encodeURIComponent. List:

Notes:
encodeURIComponent does not encode -_.!~*'(). If you want to these characters are encoded, you have to replace them with a corresponding UTF-8 sequence of characters

If you want to learn more about encodeURI and encodeURIComponent, please check the reference link. Reference Link