How to accurately obtain the URL information of the current page in js_javascript skills

In WEB development, javascript is often used to obtain the URL information of the current page. Here is my summary of obtaining URL information.

Let’s take an example of a URL and get its various components: http://i.cnblogs.com/EditPosts.aspx?opt=1

1. window.location.href (set or get the entire URL as a string)

var test = window.location.href;
alert(test);
Return: http://i.cnblogs.com/EditPosts.aspx?opt=1

2. window.location.protocol (set or get the protocol part of the URL)

var test = window.location.protocol;
alert(test);
Return: http:

3. window.location.host (set or get the host part of the URL)

var test = window.location.host;
alert(test);
Return: i.cnblogs.com

4. window.location.port (set or get the port number associated with the URL)

var test = window.location.port;
alert(test);
Return: null character (if the default port 80 is used (update: even if :80 is added), the return value is not the default 80 but the null character)

5. window.location.pathname (set or get the path part of the URL (that is, the file address))
var test = window.location.pathname;
alert(test);
Return: /EditPosts.aspx

6. window.location.search (set or get the part following the question mark in the href attribute)

var test = window.location.search;
alert(test);
Return:?opt=1

PS: To obtain the query (parameter) part, in addition to assigning values ​​​​to dynamic languages, we can also assign static pages and use javascript to obtain the corresponding parameter values.

7. window.location.hash (set or get the segment after the pound sign "#" in the href attribute)

var test = window.location.hash;
alert(test);
Return: empty character (because there is none in the url)

8. js gets the parameter value in the url

1. Regularity method

function getQueryString(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}
// 这样调用：
alert(GetQueryString("参数名1"));
 
alert(GetQueryString("参数名2"));
 
alert(GetQueryString("参数名3"));

2. split method

function GetRequest() {
  var url = location.search; //获取url中"?"符后的字串
  var theRequest = new Object();
  if (url.indexOf("?") != -1) {
    var str = url.substr(1);
    strs = str.split("&");
    for(var i = 0; i < strs.length; i ++) {
      theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
    }
  }
  return theRequest;
}
var Request = new Object();
Request = GetRequest();<br>// var id=Request["id"]; 
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request['参数1'];
// 参数2 = Request['参数2'];
// 参数3 = Request['参数3'];
// 参数N = Request['参数N'];

3. Specify to pick up

For example, for a url: http://i.cnblogs.com/?j=js, if we want to get the value of parameter j, we can call it through the following function.

function GetQueryString(name) { 
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
  var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
  var context = ""; 
  if (r != null) 
     context = r[2]; 
  reg = null; 
  r = null; 
  return context == null || context == "" || context == "undefined" ? "" : context; 
}
alert(GetQueryString("j"));

4. How to obtain a single parameter

function GetRequest() {
  var url = location.search; //获取url中"?"符后的字串
  if (url.indexOf("?") != -1) {  //判断是否有参数
   var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
   strs = str.split("=");  //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
   alert(strs[1]);     //直接弹出第一个参数 （如果有多个参数 还要进行循环的）
  }
}

The above is the entire content of this article. I hope it will be helpful for everyone to understand how to obtain the URL information of the current page.