Javascript | Encode URL Query Parameter

Please SUBSCRIBE my YouTube Channel: FrontEnd Interview Preparation: https://www.youtube.com/channel/UC-elmWUfbcbmvuhlS12nCtg

This is something I struggled with last night to understand that how important it is to encode the URL query parameter.

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 them into a URL. Special characters such as &, space, ! when entered in a URL need to be escaped, otherwise, it may cause unpredictable situations.

My Use case: Need to accept query string parameters in order to make GET requests.

We have two alternative encodeURIcomponent() and encodeURI() to encode URL, let see how and when to use them -

When to use encodeURIcomponent() and encodeURI() ?

• 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.

Which characters are encoded?

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

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

The characters A-Z a-z 0-9 - _ . ! ~ * ' ( ) are not escaped.

For example, How to encode

1. When accepting an input that may have spaces.

encodeURI("http://www.myXYZ.com/a have spaces .html")
Output - "http://www.myXYZ.com/a%20have%20spaces%20.html"

2. When building a URL from query string parameters.

let param = encodeURIComponent('mobile')  
let url = "http://myXYZ.com/?search=" + param + "&length=99";
Output - "http://myXYZ.com/?search=mobile&length=99"

3. When accepting query parameters that may have reserved characters.

let params = encodeURIComponent('mobile %2%2& phone%2')
   let url = "http://myXYZ.com/?search=" + params; 
output - "http://myXYZ.com/?search=mobile%20%252%252%26%20phone%252"

Are you ready to ace your next coding interview and land that dream job? Design Gurus has an incredible course, “Grokking the Coding Interview,” that will empower you with the skills and knowledge needed to tackle coding interviews with confidence.

🚀 Check out the course here!

I recently discovered this gem, and it has been a game-changer for me. The course covers a wide range of topics, from data structures to algorithms, presented in a clear and engaging manner. Whether you’re a beginner or looking to brush up on your skills, this course is designed to cater to all levels.

Summary

• use encodeURI, when you have a complete URL.
• use encodeURIComponent , when you have a part of a URL
• The characters A-Z a-z 0-9 - _ . ! ~ * ' ( ) are not escaped.

Hope You Guys Liked It. Please follow as more articles are coming and comment if you have any questions and like the article If you understood. Thanks !! Enjoy !!

Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer