使用js获取QueryString的方法小结
本文原理是使用正则表达式匹配location.search中的字符串。其中三个主要函数为 getQueryString()、getQueryStringByName(name)和getQueryStringByIndex(index)
三个主要方法：
|
方法 |
说明 |
|
getQueryString |
获取QueryString的数组。 例如路径QueryStringDemo.html?id=5&type=1&flag=0 调用后返回["id=5", "type=1", "flag=0"] |
|
getQueryStringByName |
根据QueryString参数名称获取值 |
|
getQueryStringByIndex |
根据QueryString参数索引获取值 |
代码如下:
//获取QueryString的数组
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;
}
//根据QueryString参数名称获取值
function getQueryStringByName(name){
var result = location.search.match(new RegExp("[\?\&]" + name+ "=([^\&]+)","i"));
if(result == null || result.length < 1){
return "";
}
return result[1];
}
//根据QueryString参数索引获取值
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;
}
测试页面路径：QueryStringDemo.html?id=5&type=1&flag=0
页面加载时： 
在QueryString's name后的文本框中输入要获取的QueryString的名称获取相应的值： 
在QueryString's index后的文本框中输入要获取的QueryString的索引获取相应的值（索引从0开始）： 
这样就可以在页面中方便的获取QueryString的值了。最后附上测试页面QueryStringDemo.html的源代码：
代码如下:
<!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.jb51.net</title>
<script type="text/javascript">
//获取QueryString的数组
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;
}
//根据QueryString参数名称获取值
function getQueryStringByName(name){
var result = location.search.match(new RegExp("[\?\&]" + name+ "=([^\&]+)","i"));
if(result == null || result.length < 1){
return "";
}
return result[1];
}
//根据QueryString参数索引获取值
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;
}
//绑定当控件高亮选中时，点击“回车键”时执行的操作
//control：要绑定事件的控件
//func：要执行的方法
function bindEnterEvent(control, func){
control.onkeypress = function(){
if (event.keyCode == 13){
func();
}
}
}
//根据输入的QueryString名称获取值
function getByName(){
var name = document.getElementById("txtQueryStringName").value;
document.getElementById("txtResult").innerHTML = getQueryStringByName(name);
}
//根据输入的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 : </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>结果 ：</span><span id="txtResult"></span>
</div>
<!--页面加载时执行的操作-->
<script type="text/javascript">
//显示所有QueryString
document.getElementById("queryString").innerHTML = getQueryString();
//为txtQueryStringName绑定回车事件
bindEnterEvent(txtQueryStringName, getByName);
//为txtQueryStringIndex绑定回车事件
bindEnterEvent(txtQueryStringIndex, getByIndex);
</script>
</body>
</html>
pdf版下载地址
相关推荐
-
NodeJS学习笔记之（Url，QueryString，Path）模块
一,开篇分析 这篇文章把这三个模块拿来一起说,原因是它们各自的篇幅都不是很长,其次是它们之间存在着依赖关系,所以依次介绍并且实例分析.废话不多说了,请看下面文档: (1),"Url模块" 来个小栗子: 复制代码 代码如下: var url = require('url'); var queryUrl = "http://localhost:8888/bb?name=bigbear&memo=helloworld" ; console.log(typeof
-
node.js中的querystring.unescape方法使用说明
方法说明: 该方法使可用来重写 querystring.parse 语法: 复制代码 代码如下: querystring.unescape 接收参数: 无 源码: 复制代码 代码如下: // a safe fast alternative to decodeURIComponent QueryString.unescapeBuffer = function(s, decodeSpaces) { var out = new Buffer(s.length); var state = 'CH
-
JavaScript实现QueryString获取GET参数的方法
复制代码 代码如下: <div id="page"> <select name="select1" id="select-type"> <option value="0">请选择</option> <option value="1">企业</option> <option value="2">产品<
-
js获取URL的参数的方法(getQueryString)示例
复制代码 代码如下: function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = location.search.substr(1).match(reg); if (r != null) return unescape(decodeURI(r[2])); return null; }
-
JavaScript QueryString解析类代码
使用示例: 复制代码 代码如下: var qs = new QueryString(query); qs.set("ajaxids", ids) qs.set("ajaxsn", new Date()) query = qs.toStr(); 也可以连续调用: 复制代码 代码如下: query = new QueryString(query).set("ajaxids", ids).set("ajaxsn", new Date
-
JavaScript获取URL中参数querystring的方法详解
一. 获取url的querystring参数 获取url的querystring参数的两种方法如下: 1.1 方法一:正则匹配 //获取url中的参数 function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", i); // 匹配目标参数 var result = window.location.search.substr(1).
-
JS获取URL中参数值（QueryString）的4种方法分享
方法一:正则法 复制代码 代码如下: 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;}/
-
node.js中的querystring.stringify方法使用说明
方法说明: 将对象转换成字符串,字符串里多个参数将用 '&' 分隔,将用 '=' 赋值. 这个函数的操作和 querystring.parse()是相反的,具体可以看一下例子就了解了. 语法: 复制代码 代码如下: querystring.stringify(obj, [sep], [eq]) 接收参数: obj 欲转换的对象 sep 设置
-
node.js中的querystring.parse方法使用说明
方法说明: 将字符串转成对象.说白了其实就是把url上带的参数串转成数组对象.(看例子就知道咯) 语法: 复制代码 代码如下: querystring.parse(str, [sep], [eq], [options]) 接收参数: str 欲转换的字符串 sep 设置分隔符,默认为 '&' eq
-
node.js中的querystring.escape方法使用说明
方法说明: 该方法使可用来重写 querystring.stringify 语法: 复制代码 代码如下: querystring.escape 接收参数: 无 源码: 复制代码 代码如下: QueryString.escape = function(str) { return encodeURIComponent(str); };