I want to extract out the query string values from the URL.
So, in the most upvoted answer in How can I get query string values in JavaScript? - window.location.search is used.
Is there any problem in using window.location.href?
I am trying to root cause a problem where in sometimes I am getting empty query string value when using location.href
The 2 properties return different things:
href: Is a DOMString containing the whole URL.
and:
search: Is a DOMString containing a '?' followed by the parameters of the URL. Also known as "querystring"
So you could use one or the other, just make sure to account for the differences between the returned values in your function. If you decide to use the href property you will need to first extract the query string part (the part after the ?) before splitting it into pieces.
Browsers now have a URLSearchParams class that can help to parse search params. It has been around in modern browsers for almost 4 years now: https://caniuse.com/?search=URLSearchParams
let queryParams = new URLSearchParams(window.location.search)
queryParams.set('page', '1')
queryParams.toString()
queryParams.get('page')
queryParams.delete('page')
i use
var qr={};
window.location.search.substring(1).split("&").forEach(p => { qr[p.split("=")[0]] = p.split("=")[1] })
//use
console.log(qr["sample"]);
//or
console.log(qr.sample);
Note - if there is not location.href.search value you will get a null string.
You can explore the DOM of a page - any page - using a browser's Inspect feature to look at values.
You can learn a lot about the DOM using this procedure - more than most every even hear about.
Open the inspector (how depends on the browser but try right clicking anywhere on the page and check the drop down menu that you'll see - it may read Inspect or Inspect Object.
Once the inspector is open, click on console in the menu at the top of the inspector frame.
For Foxfire, the input line, where you can type in things to explore the DOM is at the bottom of the inspector window and is prefixed with >>
Note - Chrome shows you a multi-line input field, Firefox only a one line field. If you have Chrome - use it to inspect things, after you type something and press Enter the value you want will be displayed under what you type and the cursor moved down to the next blank line so you can enter something else.
Firefox allows you to view things but it clunky and a tad harder to use.
Into the input line or field, type:
document.location.
A list of all the properties for the location of the document (the URL) will be displayed and it has auto fill in to help you.
For example:
document.location.search will show any text in the URL following the # sign in the URL
document.location.href will show the you the entire URL
document.location.host will show you the host part of the URL
Experiment and look at all the properties listed for document.location and you'll learn quite about bit about the document.location. property.
You can also type window. and see a list of the window object's property - one of which will be document.
Instead of typing document.location.href you could make it harder to type by typing window.document.location.href
They produce the same results because the top property is always assumed to be window.
For Firefox - After you type something and hit enter, the results will be displayed above the input line. To bring up what you last typed, so you can change it, press the up arrow key wile the cursor is in the input line.
With Chrome - as I said above, when you press enter, the value will be displayed the line you just typed and the cursor will be moved down to the next blank line where you can enter the name of another property to see what it's value is.
Explore top. and self. - you'll find the are the top window object (if there are multi-frames on the page - frames, not iframes) and the current window.
Spending some time exploring the properties of window. self. top. will teach you a lot about the DOM (Document Object Model) that you might not ever come across.
If you don't seen an input field or line, make sure you click Console in the inspector top menu.
If you decided to use, say, document.location.href you will code it like that in your JavaScript to get the value or to set the value - you can change the href and have the browser go to another web page.
Note - one of the other answers said
"If you decide to use the href property you will need to first extract the query string part (the part after the ?) before splitting it into pieces"
You need not split anything off. Explore all of the properties of document.location and you'll see that you can get the hash, search, etc. already "split off" from the location string.
Hash is the value after a pound sign (#) in the URL
Search is the value after a question mark (?) in the URL
Here are some other things to look at:
document.links
document.links[0]
document.URL
document.body
Just browse through the DOM - you will learn a lot.
Am assuming you know javascript array and few method
Use the window.location.href
var url = 'site.com/seach?a=val0&b=val1'
split the '?'
var someArray = url.split('?');
The someArray looks like this ['site.com/seach', 'a=1000&b=c'] index 0 is the window.location and index 1 is queryString
var queryString = someArray[1];
Go futher a split '&' so u get a key=value
var keyValue = queryString.split('&');
keyVal looks like this ['a=val0', 'b=val1'];
Now lets get keys and values.
var keyArray=[], valArray=[];
Loop through the keyValue array and split '=' the update keyArray and valArray
for(var i = 0; i < keyValue.length; i++){
key = keyValue[i].split('=')[0];
val = keyValue[i].split('=')[1];
keyArray.push(key);
valArray.push(val);
}
Finally we have
keyArray = ['a', 'b'];
valArray = ['val0', 'val1'];
Our full codes looks like this.
var url = 'site.com/seach?a=val0&b=val1';
var someArray = url.split('?');
var queryString = someArray[1];
var keyValue = queryString.split('&');
var keyArray=[], valArray=[];
for(var i = 0; i < keyValue.length; i++){
key = keyValue[i].split('=')[0];
val = keyValue[i].split('=')[1];
keyArray.push(key);
valArray.push(val);
}
DONE!
