正则表达式使用js获取QueryString

发布时间：2020-12-14 00:35:29 所属栏目：百科来源：网络整理

导读：http://www.cnblogs.com/sunnycoder/archive/2010/02/28/1674998.html 从网上看到一些使用js获取QueryString的方法，但用起来不是很理想，所以决定自己写一个。主要原理是使用正则表达式匹配location.search中的字符串。三个主要方法：方法说明 getQueryS

http://www.cnblogs.com/sunnycoder/archive/2010/02/28/1674998.html

从网上看到一些使用js获取QueryString的方法，但用起来不是很理想，所以决定自己写一个。主要原理是使用正则表达式匹配location.search中的字符串。

三个主要方法：

方法	说明
getQueryString	获取QueryString的数组。例如路径QueryStringDemo.html?id=5&type=1&flag=0 调用后返回["id=5","type=1","flag=0"]
getQueryStringByName	根据QueryString参数名称获取值
getQueryStringByIndex	根据QueryString参数索引获取值

//获取QueryString的数组

functiongetQueryString(){

varresult = location.search.match(newRegExp("[?&;][^?&;]+=[^?&;]+","g"));

if(result ==null){

return"";

}

for(vari = 0; i < result.length; i++){

result[i] = result[i].substring(1);

}

returnresult;

}

//根据QueryString参数名称获取值

functiongetQueryStringByName(name){

varresult = location.search.match(newRegExp("[?&;]"+ name+"=([^&;]+)",21)">"i"));

if(result ==null|| result.length < 1){

return"";

}

returnresult[1];

}

//根据QueryString参数索引获取值

functiongetQueryStringByIndex(index){

if(index ==null){

return"";

}

varqueryStringList = getQueryString();

if(index >= queryStringList.length){

return"";

}

varresult = queryStringList[index];

varstartIndex = result.indexOf("=") + 1;

result = result.substring(startIndex);

returnresult;

}

测试页面路径：QueryStringDemo.html?id=5&type=1&flag=0

页面加载时：

在QueryString's name后的文本框中输入要获取的QueryString的名称获取相应的值：

在QueryString's index后的文本框中输入要获取的QueryString的索引获取相应的值（索引从0开始）：

这样就可以在页面中方便的获取QueryString的值了。最后附上测试页面QueryStringDemo.html的源代码：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metacontent="text/html; charset=utf-8"http-equiv="Content-Type"/>

<title>QueryString获取</title>

<scripttype="text/javascript">

//获取QueryString的数组

functiongetQueryString(){

varresult = location.search.match(newRegExp("g"));

for(vari = 0; i < result.length; i++){

result[i] = result[i].substring(1);

}

returnresult;

}

//根据QueryString参数名称获取值

functiongetQueryStringByName(name){

varresult = location.search.match(newRegExp("=") + 1;

result = result.substring(startIndex);

returnresult;

}

//绑定当控件高亮选中时，点击“回车键”时执行的操作

//control：要绑定事件的控件

//func：要执行的方法

functionbindEnterEvent(control,func){

control.onkeypress =function(){

if(event.keyCode == 13){

func();

}

//根据输入的QueryString名称获取值

functiongetByName(){

varname = document.getElementById("txtQueryStringName").value;

document.getElementById("txtResult").innerHTML = getQueryStringByName(name);

}

//根据输入的QueryString的索引获取值

functiongetByIndex(){

varindex = document.getElementById("txtQueryStringIndex").value;

document.getElementById("txtResult").innerHTML = getQueryStringByIndex(index);

}

</script>

</head>

<body>

<div>

<span>QueryString :</span><spanid="queryString"></span>

</span>QueryString's name : </span>

<inputid="txtQueryStringName"name="txtQueryStringName"type="text"/>

<inputname="btnGetByName"type="button"value="获取"onclick="getByName()"/>

</span>QueryString's index :</inputid="txtQueryStringIndex"name="txtQueryStringIndex"type="text"/>

<inputname="btnGetByIndex"type="button"value="获取"onclick="getByIndex()"/>

</span>结果：</spanid="txtResult"></div>

<scripttype="text/javascript">

//显示所有QueryString

document.getElementById("queryString").innerHTML = getQueryString();

//为txtQueryStringName绑定回车事件

bindEnterEvent(txtQueryStringName,getByName);

//为txtQueryStringIndex绑定回车事件

bindEnterEvent(txtQueryStringIndex,getByIndex);

</body>

</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!