JavaScript 获取 URL 参数的两种常用方法
本文介绍了在 JavaScript 中获取 URL 查询参数的两种主要方法。第一种是通过字符串分割分析,模拟 ASP 或 PHP 的获取方式,适用于需要一次性解析所有参数的场景;第二种是利用正则表达式精确匹配特定参数名,适合单独获取某个参数值。文中提供了完整的代码示例及调用方式,帮助开发者根据实际需求选择合适方案。
JavaScript 获取 URL 参数概述
本文详细介绍 JavaScript 中获取 URL 传值的实现方式,供读者参考学习。
在 Web 开发中,经常需要解析 URL 中的参数信息。
典型的 URL 格式包含问号后的键值对,例如:index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4 等。
对于静态 HTML 文件,可以通过 JavaScript 读取 URL 参数,并根据获取到的参数值动态控制页面内容的输出。
方法一:字符串分割分析法
第一种方法:字符串分割分析法
这是一种获取 URL 查询字符串(QueryString)参数的客户端解决方案,功能类似于 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]]=unescape(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 中携带的同名参数。
方法二:正则表达式分析法
第二种方法:正则表达式分析法
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;
}
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));
补充:另一种获取 URL GET 传值的 JavaScript 函数实现。
function getvl(name) {
var reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)(\\s|&|$)", "i");
if (reg.test(location.href))
return unescape(RegExp.$2.replace(/\+/g, " "));
return "";
};
以下简述其使用方法。
假设 URL 为 http://localhost/index.php?qz=ddddk,需要获取 qz 的值。
具体代码如下:
调用 getvl(bb) 即可获取结果。
希望上述内容对 JavaScript 程序设计有所帮助。
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
