When programming in Javascript there are times when you might want to know if there were any parameters passed through the URL. In case you aren’t familiar with URL parameters, they are the arguments set after the base URL and the ‘?’. For example let’s look at the below example:
https://www.josephamaurer.com/Projects/DevAPI/RecentDevPosts.html?PerPage=100
?PerPage=100 is the first parameter that is passed with this URL. It’s up to your javascript logic to grab this parameter’s value and use it appropriately. So can there be multiple parameters? You betcha! Additional parameters are added with the following syntax:
https://www.josephamaurer.com/Projects/DevAPI/RecentDevPosts.html?PerPage=100&Page=2
‘&Page=2’ is the second parameter that is with this URL. At this point you might be wondering what are the limitations of passing arguments like this? Well the obvious one is that you can’t have any spaces. Another is that the ‘#’ character is reserved for jumping to a section of a document. Generally, URL Encoding is used to deal with this problem and make any text safe to pass in the URL. Internet Explorer (RIP) had a maximum length of 2,083 characters. Although, the RFC 2616 spec says that servers need to be able to handle any number of characters, you do risk a web server failing to respond if the request is too long. I highly recommend looking at the Google Chrome guidelines if you plan to do this on a production project.
Web Forms
The most common use of these query strings within a URL is web forms. When a user hits submit on a form, their responses are posted in the URL for processing by the backend. In this tutorial, we’ll focus on just grabbing values from that URL for processing, but there are plenty of examples of using this on the backend.
URL Search Params
When using javascript to parse the URL, it is easiest to use URLSearchParams instead of trying to parse the string yourself. You could use regular expressions to try to do this, but as I wrote earlier this is a terrible idea. So let’s look at the example below and see how this works.
As you can see, grabbing the params is actually a really straightforward process. You can very easily query to see what objects are present and check if they are null or an actual value first before using them. At the time of writing this, browser support is very good and is available to use almost everywhere.
Live Example
Building on my last video post, you can now pass parameters to my example page to play with the number of posts that it returns.
DEV.to API Tester: Recent Posts
Let me know if you end up having a use for this method and happy coding 😊
Getting a URL Parameter in Javascript was originally published in Geek Culture on Medium, where people are continuing the conversation by highlighting and responding to this story.