I have a URL with a query string which starts and ends with a specific letters. Here's an example and my approach:

Let's say the url in the address bar is "http://localhost:3001/build/?videoUrl=bitcoin.vid/money#/"

I first extract this url using the window.location.href and save it in a variable x.

Now, I want to first check if the videoUrl is present in the URL or not and then if it is available, I split the URL and extract the required URL which is bitcoin.vid/money

let x = "http://localhost:3001/build/?videoUrl=bitcoin.vid/money#/";
let y;
let result;
if(x.indexOf("?videoUrl")>-1) {
   y = x.split("?videoUrl=");
   result = y[1].split("#")[0];
   console.log("Resultant URL:", result);
}

I feel the whole code which I wrote is a bit cumbersome. Could anyone let me know if there is more elegant way to do the same?

Note: videoUrl is not available always in the URL, hence the check if it exists. And please also let me know if I need to further make any checks?

I have a URL with a query string which starts and ends with a specific letters. Here's an example and my approach:

Let's say the url in the address bar is "http://localhost:3001/build/?videoUrl=bitcoin.vid./money#/"

I first extract this url using the window.location.href and save it in a variable x.

Now, I want to first check if the videoUrl is present in the URL or not and then if it is available, I split the URL and extract the required URL which is bitcoin.vid./money

let x = "http://localhost:3001/build/?videoUrl=bitcoin.vid./money#/";
let y;
let result;
if(x.indexOf("?videoUrl")>-1) {
   y = x.split("?videoUrl=");
   result = y[1].split("#")[0];
   console.log("Resultant URL:", result);
}

I feel the whole code which I wrote is a bit cumbersome. Could anyone let me know if there is more elegant way to do the same?

Note: videoUrl is not available always in the URL, hence the check if it exists. And please also let me know if I need to further make any checks?

• javascript

• Possible duplicate of How can I get query string values in JavaScript? – Herohtar Commented Jan 4, 2018 at 18:57
• 2 - developer.mozilla/en-US/docs/Web/API/URLSearchParams - caniuse./#search=URLSearchParams – Peter Seliger Commented Jan 4, 2018 at 19:03

2 Answers 2

Your method works, which is the main thing- but for cleaner and more robust approach, you can make use of the built-in JavaScript URL() class.

let x = "http://localhost:3001/build/?videoUrl=bitcoin.vid./money#/";
console.log((new URL(x)).searchParams.get("videoUrl"));

If your videoUrl parameter is not present, then this will just return null, and you can deal with that accordingly

If you want to make this slightly more reusable, here's a function that does what you need:

const getParamFromUrl = (url, param) =>
    (new URL(url)).searchParams.get(param);

There's plenty more information about implementation and patibility of this in the documentation, here: https://developer.mozilla/en-US/docs/Web/API/URL

Good question!

Two options for a neat solution:

• Try using the URL approach thatr @Lissy suggested, the functionality to do what you need is all built in. However she didn't mention the potential flaws when it es to corss-browser functionality
• Alternativley, I'd just use a simple regex, e.g. (\?|\&)([^=]+)\=([^&]+) - in my opinion, it is much simpler