DEV Community

Cover image for Easy way to get parameters from a URL
Maher Alkendi
Maher Alkendi

Posted on

Easy way to get parameters from a URL

Getting Url parameters can be tricky. I am sure I am not the only one that has used google to search for the perfect regular expression to help extract a parameter from a Url.

While learning and mastering Regular Expressions is probably the best in this case. You might not have the time to learn them and just need a nice fix that is neat and easy to understand.

The code below shows how this can easily be done using the URL API

code snippet

You can read more about the ins and outs of this API by checking out the link below:

URL - Web APIs | MDN

Reading through the MDN docs, youโ€™ll notice this API has two interfaces the URL interface and the URLSearchParams interface.

The URL interface in this case allows us to parse our Url and returns an object that represents it.

URL Object

Note that one of the keys in the object (searchParams) refers to the URLSearchParams interface. This interface gives us methods that allow us to work with the query string in a Url.

You can read more about the query string here: Query string - Wikipedia

Also check out all the methods that URLSearchParams interface provides here: URLSearchParams - Web APIs | MDN

In this case all we need to do is call URLSearchParams.get()and pass it the parameter name we need, as a string. Feel free to play around further with this API. No need for an editor this can all be done from your browser console!

Now while this API is amazing! It does have one issue. It is not supported by IE.

Browser compatibility

MDN does suggest we use window.URL in this case. Strangely enough I tested it on IE 11 and it didn't work. The docs on MDN do not give much more detail on an alternative for IE, so if you have to support IE try using a poly-fill. I like the solution shown on JQUERY BY EXAMPLE

When using any of these cool Web APIs it is important to check for browser compatibility. In my case I needed this method for a dashboard project that I am building for a client and the client only uses chrome (luckily). This allowed me to utilize this API.

Hope this short article can help you on your next project!

Got questions? Feel free to reach out via the comments or my twitter

Ok! Now back to learning ๐Ÿ‘จ๐Ÿฟโ€๐Ÿ’ป

Top comments (2)

Collapse
 
jsn1nj4 profile image
Elliot Derhay

Nice! Didn't know about that.

Previously I would split the url at the ? and then split the second array element (the string containing the query string) at each & (if it existed) and then split each new array element at the = to get the parameter list.

Of course I also found that on Stack Overflow a while ago. I definitely didn't invent that one.

Collapse
 
ma7eer profile image
Maher Alkendi

Ya I used to do the same thing until I fell on this trick from... Stack Overflow haha

From there I went to MDN to understand the API more. Hopefully it gets support from IE at some point