How To Get URL Parts in JavaScript :: A JavaScript Tutorial For Beginners
In some scenario we need to communicate with website url that seen in address bar of the browser using JavaScript. It’s very easy to access the url using javascript. But in order to get query string from URL, default functions or methods are not available. Using javscript we can access the URL using default method in javascript. We are not able to edit URL in javascript without postback. But we can reload the page from javascript and also we can redirect to other url from javascript. Let’s see all about jaavscript with website URL.
How to get website URL in JavaScript / how do I use javascript to get url of current page
Here we are going to explain how we can use javascript to get the website url of the current page. Lets imagine our current page is http://myexample.com/example/index.html and we need to get each part of the url separately in javascript. We can access the parts of URL using javascript as follows.
window.location.protocol = "http"
window.location.host = " myexample.com "
window.location.pathname = "example/index.html"
window.location.href = "http://myexample.com/example/index.html"
If we want to access the entire website URL of the current page we can use window.location.href as mentioned above. Also we can access part by part of current page URL in javascript using above mentioned options. But there is no default option to get/access the query string values in current page URL in javascript.
Redirect to another page using JavScript/ JavaScript redirect to a new page
By using window.location we can redirect to another website page from javascript. So it’s better to use javascript navigation to redirect to another page instead of asp.net response.redirect function. Because Response.Redirect function first send to Server then identifying the web page that we need to navigate and again resend to client. There is a extra round trips will be happen in the case of Response.Redirect method. To avoid this round trips we can use Javascript redirection method as follows.
window.location = “http://www.supershope.com”;
How to access/get query string values in website URL using JavaScript (from client side)
In order to access the querystring of the current web page there are no default functions or methods in JavaScript. To get URL parameters using javascript we are demonstrating a function that is used to get all the URL parameters from website in JavaScript.
Javascript function to get all URL parameters from Website URL
function getUrlParams() {
var params = {};
window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function (str, key, value) {
params[key] = value;
});
return params;
}
var params = getUrlParams();
alert(params.id);
alert(params.name);
Whenever we want to get querystring values from website URL we can call above function and which returns a object that holds all website URL parameters of the current page as key value pairs.
How to get a particular querystring value from the URL in JavaScript
We have noted that we cannot able to get query string from website URL in default methods in JavaScript. So we written a function to get all parameter values in the current page. But if we want to get a particular querystring values from the URL it’s difficult to use above method. That means if I want to get ‘id’ query string from the URL we need to get all parameters from the URL and from that collection get id values. Instead of this we are going to write another function which access the URL parameter name as the function parameter and return value of the particular querystring. If there is no query string in the URL with specified name will return empty string.
Javascript function to get particular querystring value from the website URL
function getParam(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return "";
else
return results[1];
}
var id = getParam('id');
alert(id);
By using above function, we can easily get particular query string from client side script. If we send a value to above function and suppose there is no query string with that name, then it will return empty string. Hence we can easily accessing query string from client side using JavaScript.
