JS根據(jù)key值獲取URL中的參數(shù)值

本文提供了兩個(gè)實(shí)例，其中，示例一講解JS根據(jù)key值獲取URL中的參數(shù)值及把URL的參數(shù)轉(zhuǎn)換成json對(duì)象；示例二講解js獲取url傳遞參數(shù)，具體介紹內(nèi)容請(qǐng)看下文：

示例一：

//把url的參數(shù)部分轉(zhuǎn)化成json對(duì)象
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;
}

// 通過(guò)key獲取url中的參數(shù)值
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;
}

示例二：

js通過(guò)兩種方法獲取url傳遞參數(shù)：

<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>

然后我們通過(guò)調(diào)用此函數(shù)獲取對(duì)應(yīng)參數(shù)值：

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

以此獲取url串中所帶的同名參數(shù)

js獲取url傳遞參數(shù)方法二 正則分析法：

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("參數(shù)名1"));
alert(GetQueryString("參數(shù)名2"));
alert(GetQueryString("參數(shù)名3"));

其他參數(shù)獲取介紹：
//設(shè)置或獲取對(duì)象指定的文件名或路徑。
?
alert(window.location.pathname);
//設(shè)置或獲取整個(gè) URL 為字符串。
?
alert(window.location.href);
//設(shè)置或獲取與 URL 關(guān)聯(lián)的端口號(hào)碼。
?
alert(window.location.port);
//設(shè)置或獲取 URL 的協(xié)議部分。
?
alert(window.location.protocol);
//設(shè)置或獲取 href 屬性中在井號(hào)“#”后面的分段。
?
alert(window.location.hash);
//設(shè)置或獲取 location 或 URL 的 hostname 和 port 號(hào)碼。
?
alert(window.location.host);
//設(shè)置或獲取 href 屬性中跟在問(wèn)號(hào)后面的部分。
?
alert(window.location.search);

js如何獲取url所傳遞的參數(shù)和參數(shù)值

大家知道可以使用url傳遞參數(shù)值，本站幾乎隨便一個(gè)鏈接都會(huì)有傳值，既然要傳遞值，那么自然要獲取，否則就沒(méi)有任何意義了，下面就通過(guò)實(shí)例介紹一下如何使用javascript獲取url傳遞的參數(shù)和參數(shù)值。

代碼實(shí)例如下:

[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]);   
  }   
})(); 

一.實(shí)現(xiàn)原理:
1.判斷url是否含有參數(shù)。在本代碼中使用正則表達(dá)式if(/\?/.test(url))判斷url中是否含有?，如果含有問(wèn)號(hào)，那么就說(shuō)明此鏈接中含有參數(shù)，然后執(zhí)行if語(yǔ)句中的代碼。
2.獲取url中的參數(shù)和參數(shù)值。在這里是使用split()函數(shù)分割字符串，依次實(shí)現(xiàn)此功能。

二.代碼注釋:
1.(function(){})()，聲明一個(gè)匿名函數(shù)并執(zhí)行。
2.var urlToObject=function(url){}，聲明一個(gè)函數(shù)，此函數(shù)的參數(shù)是一個(gè)超鏈接。
3.var urlObject={}，聲明一個(gè)對(duì)象直接量。
4.if(/\?/.test(url)) ，判斷鏈接中是否含有?，也就是是否含有參數(shù)。
5.var urlString=url.substring(url.indexOf("?")+1)，截取url問(wèn)號(hào)只有的字符串。
6.var urlArray=urlString.split("&")，使用split()函數(shù)以&為標(biāo)記分割字符串，并生成一個(gè)數(shù)組。這樣每一個(gè)數(shù)組元素就是一個(gè)參數(shù)和參數(shù)值對(duì)。
7.for(var i=0,len=urlArray.length;i<len;i++)，使用for循環(huán)遍歷urlArray數(shù)組。
8.var urlItem=urlArray，將指定索引的數(shù)組值賦值給變量urlItem。
9.var item=urlItem.split("=")，再使用=分割字符串并生成一個(gè)數(shù)組，因?yàn)閡rlArray數(shù)組每一個(gè)元素都是一個(gè)參數(shù)和參數(shù)值對(duì)，例如"a=0",這樣再經(jīng)過(guò)分割，生成新數(shù)組的第一項(xiàng)就是參數(shù)名稱(chēng)，第二個(gè)項(xiàng)就是參數(shù)值。
10.urlObject[item[0]]=item[1]，將參數(shù)名稱(chēng)作為對(duì)象的屬性名稱(chēng)，參數(shù)值作為對(duì)象的屬性值。
11.return urlObject，返回對(duì)象。
12.var testUrl=http://softwhy.com/index.php?a=0&b=1&c=2，用作測(cè)試的url。
13.var result=urlToObject(testUrl)，將參數(shù)和參數(shù)值轉(zhuǎn)換成對(duì)象的屬性和屬性值，并返回此對(duì)象。
14.for(var key in result)，遍歷此對(duì)象.