JS 根据 key 值获取 URL 参数值 | 前端解析 URL 参数转 JSON 对象全方法
在前端开发中，根据 key 值获取 URL 中的参数值是高频基础需求，常用于页面传参、数据回显、路由解析等场景。本文将详细讲解多种实现方法，包括正则匹配、字符串分割、参数转 JSON 对象等核心方案，并补充参数解码、兼容处理、URL 相关属性等实用知识点，所有代码内容和原有顺序保持不变。
JS 根据 key 值获取 URL 中的参数值
本文提供了两个实例，其中，示例一讲解 JS 根据 key 值获取 URL 中的参数值及把 URL 的参数转换成 json 对象；示例二讲解 js 获取 url 传递参数，具体介绍内容请看下文：
示例一：正则匹配法（精准获取单个参数 + 参数转 JSON 对象）
该方案基于正则表达式实现，匹配精准、兼容性强，支持单独获取指定 key 的参数值，也可将 URL 所有参数转为 JSON 对象方便批量操作。
//把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;
}
补充：
- 正则语法解析：(^|&)匹配参数开头（或 & 分隔符），([^&]*)匹配参数值（非 & 的任意字符），(&|$)匹配参数结尾（或 & 分隔符），i表示忽略大小写，适配不同规范的 URL 参数；
- unescape 解码：用于解析 URL 中编码的特殊字符（如空格、中文），现代开发也可使用decodeURIComponent（解码更全面，推荐替代）。
示例二：两种经典方法获取 URL 传递参数
js 通过两种方法获取 url 传递参数，分别为字符串分割法（直观易懂，适合新手）和正则分析法（简洁高效，适合精准获取单个参数），满足不同开发场景需求。
js 获取 url 传递参数方法一：字符串分割法（参数转对象，批量获取）
这里是一个获取 URL 带 QUESTRING 参数的 JAVASCRIPT 客户端解决方案，相当于 asp 的 request.querystring，PHP 的 $_GET 函数:
<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>
然后我们通过调用此函数获取对应参数值：
<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>
以此获取 url 串中所带的同名参数
补充：
- 核心逻辑：通过split("&")将参数串拆分为「参数 = 值」数组，再通过split("=")拆分每个项的键和值，最终挂载到对象上；
- 注意事项：若参数值中包含=（如url?a=1=2），会导致拆分异常，此场景推荐使用示例一的正则法。
js 获取 url 传递参数方法二 正则分析法（简洁获取单个参数）
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);
URL 参数转对象完整实现（js 如何获取 url 所传递的参数和参数值）
大家知道可以使用 url 传递参数值，本文几乎随便一个链接都会有传值，既然要传递值，那么自然要获取，否则就没有任何意义了，下面就通过实例介绍一下如何使用 javascript 获取 url 传递的参数和参数值。 代码实例如下:
[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]);
}
})();
以上代码可以输出 url 的参数和对应的参数值，下面就介绍一下实现过程。
一.实现原理:
1.判断url是否含有参数。在本代码中使用正则表达式if(/\?/.test(url))判断url中是否含有?，如果含有问号，那么就说明此链接中含有参数，然后执行if语句中的代码。
2.获取url中的参数和参数值。在这里是使用split()函数分割字符串，依次实现此功能。
二.代码注释:
1.(function(){})()，声明一个匿名函数并执行。
2.var urlToObject=function(url){}，声明一个函数，此函数的参数是一个超链接。
3.var urlObject={}，声明一个对象直接量。
4.if(/\?/.test(url)) ，判断链接中是否含有?，也就是是否含有参数。
5.var urlString=url.substring(url.indexOf("?")+1)，截取url问号只有的字符串。
6.var urlArray=urlString.split("&")，使用split()函数以&为标记分割字符串，并生成一个数组。这样每一个数组元素就是一个参数和参数值对。
7.for(var i=0,len=urlArray.length;i<len;i++)，使用for循环遍历urlArray数组。
8.var urlItem=urlArray，将指定索引的数组值赋值给变量urlItem。
9.var item=urlItem.split("=")，再使用=分割字符串并生成一个数组，因为urlArray数组每一个元素都是一个参数和参数值对，例如"a=0",这样再经过分割，生成新数组的第一项就是参数名称，第二个项就是参数值。
10.urlObject[item[0]]=item[1]，将参数名称作为对象的属性名称，参数值作为对象的属性值。
11.return urlObject，返回对象。
12.var testUrl=http://softwhy.com/index.php?a=0&b=1&c=2，用作测试的url。
13.var result=urlToObject(testUrl)，将参数和参数值转换成对象的属性和属性值，并返回此对象。
14.for(var key in result)，遍历此对象.
