使用js獲取QueryString的方法小結(jié)

更新時(shí)間：2010年02月28日 08:07:13 作者：

從網(wǎng)上看到一些使用js獲取QueryString的方法，但用起來不是很理想，所以決定自己寫一個(gè)。主要原理是使用正則表達(dá)式匹配location.search中的字符串。

本文原理是使用正則表達(dá)式匹配location.search中的字符串。其中三個(gè)主要函數(shù)為 getQueryString()、getQueryStringByName(name)和getQueryStringByIndex(index)

三個(gè)主要方法：

方法	說明
getQueryString	獲取QueryString的數(shù)組。例如路徑QueryStringDemo.html?id=5&type=1&flag=0 調(diào)用后返回["id=5", "type=1", "flag=0"]
getQueryStringByName	根據(jù)QueryString參數(shù)名稱獲取值
getQueryStringByIndex	根據(jù)QueryString參數(shù)索引獲取值

復(fù)制代碼代碼如下:

//獲取QueryString的數(shù)組 
function getQueryString(){ 
var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+","g")); 
for(var i = 0; i < result.length; i++){ 
result[i] = result[i].substring(1); 
} 
return result; 
} 
//根據(jù)QueryString參數(shù)名稱獲取值 
function getQueryStringByName(name){ 
var result = location.search.match(new RegExp("[\?\&]" + name+ "=([^\&]+)","i")); 
if(result == null || result.length < 1){ 
return ""; 
} 
return result[1]; 
} 
//根據(jù)QueryString參數(shù)索引獲取值 
function getQueryStringByIndex(index){ 
if(index == null){ 
return ""; 
} 
var queryStringList = getQueryString(); 
if (index >= queryStringList.length){ 
return ""; 
} 
var result = queryStringList[index]; 
var startIndex = result.indexOf("=") + 1; 
result = result.substring(startIndex); 
return result; 
} 

測(cè)試頁(yè)面路徑：QueryStringDemo.html?id=5&type=1&flag=0
頁(yè)面加載時(shí)：

在QueryString's name后的文本框中輸入要獲取的QueryString的名稱獲取相應(yīng)的值：

在QueryString's index后的文本框中輸入要獲取的QueryString的索引獲取相應(yīng)的值（索引從0開始）：

這樣就可以在頁(yè)面中方便的獲取QueryString的值了。最后附上測(cè)試頁(yè)面QueryStringDemo.html的源代碼：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta content="text/html; charset=gb2312" http-equiv="Content-Type" /> 
<title>QueryString獲取演示代碼 www.dhdzp.com</title> 
<script type="text/javascript"> 
//獲取QueryString的數(shù)組 
function getQueryString(){ 
var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+","g")); 
for(var i = 0; i < result.length; i++){ 
result[i] = result[i].substring(1); 
} 
return result; 
} 
//根據(jù)QueryString參數(shù)名稱獲取值 
function getQueryStringByName(name){ 
var result = location.search.match(new RegExp("[\?\&]" + name+ "=([^\&]+)","i")); 
if(result == null || result.length < 1){ 
return ""; 
} 
return result[1]; 
} 
//根據(jù)QueryString參數(shù)索引獲取值 
function getQueryStringByIndex(index){ 
if(index == null){ 
return ""; 
} 
var queryStringList = getQueryString(); 
if (index >= queryStringList.length){ 
return ""; 
} 
var result = queryStringList[index]; 
var startIndex = result.indexOf("=") + 1; 
result = result.substring(startIndex); 
return result; 
} 
//綁定當(dāng)控件高亮選中時(shí)，點(diǎn)擊“回車鍵”時(shí)執(zhí)行的操作 
//control：要綁定事件的控件 
//func：要執(zhí)行的方法 
function bindEnterEvent(control, func){ 
control.onkeypress = function(){ 
if (event.keyCode == 13){ 
func(); 
} 
} 
} 
//根據(jù)輸入的QueryString名稱獲取值 
function getByName(){ 
var name = document.getElementById("txtQueryStringName").value; 
document.getElementById("txtResult").innerHTML = getQueryStringByName(name); 
} 
//根據(jù)輸入的QueryString的索引獲取值 
function getByIndex(){ 
var index = document.getElementById("txtQueryStringIndex").value; 
document.getElementById("txtResult").innerHTML = getQueryStringByIndex(index); 
} 
</script> 
</head> 
<body> 
<div> 
<span>QueryString : </span><span id="queryString"></span> 
</div> 
<div> 
<span>QueryString's name :&nbsp;</span> 
<input id="txtQueryStringName" name="txtQueryStringName" type="text" /> 
<input name="btnGetByName" type="button" value="獲取" onclick="getByName()" /> 
</div> 
<div> 
<span>QueryString's index : </span> 
<input id="txtQueryStringIndex" name="txtQueryStringIndex" type="text" /> 
<input name="btnGetByIndex" type="button" value="獲取" onclick="getByIndex()" /> 
</div> 
<div> 
<span>結(jié)果 ：</span><span id="txtResult"></span> 
</div> 
<!--頁(yè)面加載時(shí)執(zhí)行的操作--> 
<script type="text/javascript"> 
//顯示所有QueryString 
document.getElementById("queryString").innerHTML = getQueryString(); 
//為txtQueryStringName綁定回車事件 
bindEnterEvent(txtQueryStringName, getByName); 
//為txtQueryStringIndex綁定回車事件 
bindEnterEvent(txtQueryStringIndex, getByIndex); 
</script> 
</body> 
</html> 