Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

JS gets the parameter value in the URL based on the key value


May 08, 2021 JSON


Table of contents


This article provides two examples, in which example one explains that JS obtains the parameter value in the URL based on the key value and converts the parameters of the URL into a johnson object, and example two explains that js gets the url pass parameter, as described below:

Example one:

//把url的参数部分转化成json对象
parseQueryString: function (url) {
 var reg_url = /^[^\?]+\?([\w\W]+)$/,
  reg_para = /([^&=]+)=([\w\W]*?)(&|$|#)/g,
  arr_url = reg_url.exec(url),
  ret = {};
 if (arr_url && arr_url[1]) {
  var str_para = arr_url[1], result;
  while ((result = reg_para.exec(str_para)) != null) {
   ret[result[1]] = result[2];
  }
 }
 return ret;
}

// 通过key获取url中的参数值
getQueryString: function (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;
}

Example two:

js gets url pass parameters in two ways:

js gets url pass parameter method one:
Here is a JAVASCRIPT client solution that gets the URL with QUESTRING parameters, equivalent to asp's request.querystring, PHP's $_GET function:

<Script language="javascript">
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]]=(strs[i].split("=")[1]);
  }
 }
 return theRequest;
}
</Script>

Then we get the corresponding parameter value by calling this function:

<Script language="javascript">
  var Request = new Object();
  Request = GetRequest();
  var 参数1,参数2,参数3,参数N;
  参数1 = Request[''参数1''];
  参数2 = Request[''参数2''];
  参数3 = Request[''参数3''];
  参数N = Request[''参数N''];
</Script>

This obtains the parameter with the same name as the url string


js gets url pass parameter method two positive analysis method:

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

其他参数获取介绍:
//设置或获取对象指定的文件名或路径。
?
alert(window.location.pathname);
//设置或获取整个 URL 为字符串。
?
alert(window.location.href);
//设置或获取与 URL 关联的端口号码。
?
alert(window.location.port);
//设置或获取 URL 的协议部分。
?
alert(window.location.protocol);
//设置或获取 href 属性中在井号“#”后面的分段。
?
alert(window.location.hash);
//设置或获取 location 或 URL 的 hostname 和 port 号码。
?
alert(window.location.host);
//设置或获取 href 属性中跟在问号后面的部分。
?
alert(window.location.search);

how js gets the parameters and parameter values passed by the url

We all know that you can use url to pass parameter values, this site almost any link will have a pass value, since to pass the value, then naturally to get, otherwise there is no point, the following is an example of how to use javascript to get url passed parameters and parameter values.

Examples of code are:

[javascript]
(function(){   
  var urlToObject=function(url){   
    var urlObject = {};   
    if (/\?/.test(url)){   
      var urlString=url.substring(url.indexOf("?")+1);   
      var urlArray=urlString.split("&");   
      for(var i=0,len=urlArray.length;i<len;i++){   
        var urlItem=urlArray[i];   
        var item = urlItem.split("=");   
        urlObject[item[0]]=item[1];   
      }   
      return urlObject;   
    }   
  };   
  var testUrl="http://softwhy.com/index.php?a=0&b=1&c=2";   
  var result=urlToObject(testUrl);   
  for (var key in result){   
    console.log(key+"="+result[key]);   
  }   
})(); 
The above code can output the parameters of url and the corresponding parameter values, the implementation process is described below.


One. How to implement:
1. Determine if the url contains parameters. In this code, use the regular expression if (/???.test(url)) to determine whether the url contains it, and if it contains a question mark, the link contains parameters, and then executes the code in the if statement.
2. Get the parameters and parameter values in the url. Here is the use of the splitt() function to split the string, in turn to implement this function.


Two. Code comments:
1. (function() (), declare an anonymous function and execute it.
2.var urlToObject-function (url), declares a function, the parameters of which are a hyperlink.
3.var urlObject, declares a direct amount of an object.
4.if (/?/.test(url)) to determine whether the link contains?
5.var urlString=url.substring(url.indexOf("?") 1), intercept the url question mark only the string.
6.var urlArray-urlString.split(") uses the split() function to split the string with the tag and generate an array. So each array element is a pair of parameters and parameter values.
7.for(var i=0,len=urlArray.length; i <len; i+), use the for loop to traverse the urlArray array.
8.var urlItem-urlArray assigns the array value of the specified index to the variable urlItem.
9.var item=urlItem.split (" and then use to split the string and generate an array, because each element of the urlArray array is a pair of parameters and parameter values, such as "a-0", so that after segmentation, the first item that generates the new array is the argument name, and the second item is the parameter value.
10.urlObject ( item .
11.return urlObject, return object.
12.var testUrl=http://softwhy.com/index.php?a=0&b=1&c=2,'as the url of the test.
13.var result-urlToObject (testUrl), converts parameters and parameter values into properties and property values of the object, and returns the object.
14.for (var key in result), traversing this object.