JavaScript 获取 URL 参数的两种常用方法

作者:函数茶馆时间:2026-10-29 18:58:49浏览:662

本文介绍了在 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 程序设计有所帮助。

作者最新文章