JavaScript获取URL参数值的三种常用方法详解

作者:异步漫步时间:2026-10-29 19:40:46浏览:396

本文详细解析了JavaScript中获取URL地址栏参数的三种常用方法。通过具体代码实例,分别展示了基于字符串分割、正则表达式匹配以及手动定位截取的技术实现。文章对比了各方法的适用场景与内核差异,帮助开发者根据实际需求选择最合适的参数解析方案,适用于静态页面及动态脚本开发。

JavaScript获取URL参数值的三种常用方法详解

通过URL传递参数是Web开发中的常见操作,例如访问以下链接:

http://www.softwhy.com/home.php?mod=space&do=home&view=all

既然涉及参数传递,获取这些参数便是后续处理的关键。虽然实现方式多样,但这里介绍一种基础且直观的方法,供读者参考交流,具体代码如下:

基于字符串分割的基础解析法


var url="http://www.softwhy.com/home.php?mod=space&do=home&view=all";
if(url.indexOf("?")!=-1) 
{
var str=url.substr(url.indexOf("?")+1);
strs=str.split("&");
for(i=0;i<strs.length;i++) 
{
alert(strs.length);
alert(strs[i].split("=")[0]);
alert(strs[i].split("=")[1]);
alert(strs[i].split("=")[0],'=',strs[i].split("=")[1],'<br>');
}
}

针对上述链接进行解析:

1. strs数组的长度为3。 2. strs[0].split("=")[0]提取出mod,strs[0].split("=\)[1]提取出space。 3. strs[1].split("=")[0]提取出do,strs[1].split("=")[1]提取出home。

后续参数依此类推,逻辑保持一致。

接下来分享三种通过JavaScript获取地址栏参数的代码实例。

在处理静态页面时,使用JS获取地址栏参数值是最简便的方式。以下汇总了三种常用的JS函数代码,实用性强,现逐一分享:

方法一:JS获取地址栏字符串参数。

基于正则表达式的参数提取法


<script type="text/javascript">
Request = {
QueryString : function(item){
var svalue = location.search.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)","i"));
return svalue ? svalue[] : svalue;
}
}
alert(Request.QueryString("id"));
</script>

方法二:JS获取地址栏字符串参数。

基于数组映射的参数存储法


<script type="text/javascript">
var URLParams = new Array();
var aParams = document.location.search.substr().split('&');
for (i=; i < aParams.length i++){
var aParam = aParams.split('=');
URLParams[aParam[]] = aParam[];
}
//获取传过来的name参数:
name=URLParams["name"];
</script>

方法三:JS获取地址栏字符串参数。

基于字符串定位的手动截取法


<script type="text/javascript">
function getvalue(name)
{
var str=window.location.search;
if (str.indexOf(name)!=-)
{
var pos_start=str.indexOf(name)+name.length+;
var pos_end=str.indexOf("&",pos_start);
if (pos_end==-)
{
return str.substring(pos_start);
}
else
{
return str.substring(pos_start,pos_end)
}
}
else
{
return "没有这个name值";
}
}
var strName=prompt("请输入您所要值的名字");
alert(getvalue(strName));
</script>

上述三种方法在实现内核与逻辑上各有不同,开发者可根据具体程序需求自行选择适用方案。

作者最新文章