You might think that
encodeURIComponent do the same thing, at least from their names. And you might be confused which one to use and when.
In this article, I will demystify the difference between
What is a URI and how is it different from a URL?
URI stands for Uniform Resource Identifier.
URL stands for Uniform Resource Locator.
Anything that uniquely identifies a resource is its URI, such as id, name, or ISBN number. A URL specifies a resource and how it can be accessed (the protocol). All URLs are URIs, but not all URIs are URLs.
Why do we need to encode?
URLs can only have certain characters from the standard 128 character ASCII set. Reserved characters that do not belong to this set must be encoded.
This means that we need to encode these characters when passing into a URL. Special characters such as
! when entered in a url need to be escaped, otherwise they may cause unpredictable situations.
- User has submitted values in a form that may be in a string format and need to be passed in, such as URL fields.
- Need to accept query string parameters in order to make GET requests.
What is the difference between encodeURI and encodeURIComponent?
encodeURIComponent are used to encode Uniform Resource Identifiers (URIs) by replacing certain characters by one, two, three or four escape sequences representing the UTF-8 encoding of the character.
encodeURIComponent should be used to encode a URI Component - a string that is supposed to be part of a URL.
encodeURI should be used to encode a URI or an existing URL.
Here's a handy table of the difference in encoding of characters
Which characters are encoded?
encodeURI() will not encode:
encodeURIComponent() will not encode:
A-Z a-z 0-9 - _ . ! ~ * ' ( ) are not escaped.
const url = 'https://www.twitter.com' console.log(encodeURI(url)) //https://www.twitter.com console.log(encodeURIComponent(url)) //https%3A%2F%2Fwww.twitter.com const paramComponent = '?q=search' console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch" console.log(url + encodeURIComponent(paramComponent)) //https://www.twitter.com%3Fq%3Dsearch
When to encode
When accepting an input that may have spaces.
encodeURI("http://www.mysite.com/a file with spaces.html") //http://www.mysite.com/a%20file%20with%20spaces.html
When building a URL from query string parameters.
let param = encodeURIComponent('mango') let url = "http://mysite.com/?search=" + param + "&length=99"; //http://mysite.com/?search=mango&length=99
When accepting query parameters that may have reserved characters.
let params = encodeURIComponent('mango & pineapple') let url = "http://mysite.com/?search=" + params; //http://mysite.com/?search=mango%20%26%20pineapple
If you have a complete URL, use
encodeURI. But if you have a part of a URL, use
Interested in more tutorials and JSBytes from me? Sign up for my newsletter. or follow me on Twitter