The Difference Between EncodeURI() and EncodeURIComponent()

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 URL encoding:

Certain characters have a special value in a URL string. For example, the ? character denotes the beginning of a query string. To successfully locate a resource on the web, it is necessary to distinguish when a character is meant as a part of a string or part of the URL structure.

This means we need to encode these characters when passing them into a URL; otherwise, they may cause unpredictable situations.

Characters encoded

The difference between encodeURI() and encodeURIComponent() are exactly 11 characters.

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

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

When to encode:

JS offers some functions which we can use to easily encode URL’s. These are two convenient options:

  • encodeURI(): should be used to encode a URI or a full URL.
encodeURI(" file with spaces.html")//
  • encodeURIComponent(): should be used to encode a URI Component such as individual values in the query string
`\${encodeURIComponent('encode & decode param')}`

// ''

or when you want to encode the value of a URL parameter.

var p1 = encodeURIComponent("")

Then you may create the URL you need:

var url = "" + p1 + "&param2=99";

And you will get this complete URL:


If you have a complete URL, use encodeURI. But if you have a part of a URL, use encodeURIComponent.

If you liked this article, go follow me on Twitter (where I share my tech journey) daily, connect with me on on LinkedIn, check out my IG, and make sure to subscribe to my Youtube channel for more amazing content!!

Related Posts