encodeURI vs encodeURIComponent

I was pretty sure I'm using encodeURI and encodeURIComponent rightly till I encountered a big problem! LOL 😂. After solving my issue, I finally understood what's the difference between them. So let's find out!

There aren't big differences, the unique difference is that encodeURI() function encodes special characters, except: , / ? : @ & = + $ # whereas encodeURIComponent() function encodes special characters and in additional the above characters!

What are they

As you may know, in javascript these functions are used to encode Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character. (MDN)

When and what to use

If you're encoding a string to put in a URL component (a query string parameter), you should use encodeURIComponent, and if you're encoding an existing URL, use encodeURI. It's simple! 😎

Have you had any bad experiences with them by now?