JavaScript解析URL参数的两种方法及属性详解
本文介绍了JavaScript中获取URL参数值的两种常用方法。示例一展示了如何将URL参数字符串转换为JSON对象,并通过Key获取特定参数;示例二提供了两种获取传递参数的方案,包括分割字符串法和正则分析法。此外,还详细列出了location对象各属性的具体用途,帮助开发者快速处理前端URL数据。
以下通过两个示例,分别讲解如何利用JavaScript根据Key值获取URL中的参数值,以及如何将URL中的参数转换为JSON对象。
示例一:参数转JSON与Key获取
示例一:
//将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;
}
示例二:获取URL参数的两种方法
示例二:
JavaScript获取URL传递参数的两种实现方式如下:
方法一:获取URL传递参数
这是一个用于获取URL中Query String参数的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字符串中携带的同名参数。
方法二:使用正则分析法获取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"));
location对象属性详解
其他相关参数获取方式介绍:
//用于设置或获取对象指定的文件名或路径。
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);
以上内容介绍了JavaScript根据Key值获取URL参数值及将URL参数转换为JSON对象的方法,并展示了两种获取URL传递参数的代码实现。
代码实现非常简单,希望对开发者有所帮助。
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
