In this article, I will demystify the difference between encodeURI & encodeURIComponent.
What is a URI & 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 vị we need lớn encode?
URLs can only have certain characters from the standard 128 character ASCII set. Reserved characters that vày not belong lớn this set must be encoded.
This means that we need khổng lồ encode these characters when passing into a URL. Special characters such as &, space, ! when entered in a url need to lớn be escaped, otherwise they may cause unpredictable situations.
Use cases:User has submitted values in a khung that may be in a string format & need khổng lồ be passed in, such as URL fields.Need khổng lồ accept query string parameters in order to make GET requests.
What is the difference between encodeURI & encodeURIComponent?
encodeURI và encodeURIComponent are used khổng lồ 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 lớn 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: ~!*()"
The characters A-Z a-z 0-9 - _ . ! ~ * " ( ) are not escaped.
const url = "https://www.twitter.com"console.log(encodeURI(url)) //https://www.twitter.comconsole.log(encodeURIComponent(url)) //https%3A%2F%2Fwww.twitter.comconst paramComponent = "?q=search"console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch"console.log(url + encodeURIComponent(paramComponent)) //https://www.twitter.com%3Fq%3Dsearch
When to encodeWhen 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.htmlWhen 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=99When 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
SummaryIf you have a complete URL, use encodeURI. But if you have a part of a URL, use encodeURIComponent.
Interested in more tutorials and JSBytes from me? Sign up for my newsletter. Or follow me on Twitter
Read more posts by this author.
If you read this far, tweet to the tác giả to show them you care. Tweet a thanks
Learn to lớn code for free. darkedeneurope.com's mở cửa source curriculum has helped more than 40,000 people get jobs as developers. Get started
darkedeneurope.com is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)
Our mission: to help people learn to lớn code for free. We accomplish this by creating thousands of videos, articles, và interactive coding lessons - all freely available to the public. We also have thousands of darkedeneurope.com study groups around the world.
Donations to lớn darkedeneurope.com go toward our education initiatives & help pay for servers, services, & staff.