本文汇总了JavaScript中获取URL地址栏参数的几种常见方法，包括通过字符串分割构建字典、利用正则表达式匹配特定参数名，以及使用URLSearchParams等现代API。文章提供了完整的代码示例，涵盖从基础实现到简化版函数的多种场景，帮助开发者根据实际需求选择最合适的参数解析方案。
以下是具体的代码实现示例：
基于字符串分割的参数解析方法<script>
// 定义函数以获取地址栏中的参数数组
function getUrlParams() {
var search = window.location.search;
// 初始化用于存储参数的字典对象
var tmparray = search.substr(1, search.length).split("&");
var paramsArray = new Array;
if (tmparray != null) {
for (var i = 0; i < tmparray.length; i++) {
var reg = /[=|^==]/; // 使用正则表达式拆分，区分单个=和双==
var set1 = tmparray[i].replace(reg, '&');
var tmpStr2 = set1.split('&');
var array = new Array;
array[tmpStr2[0]] = tmpStr2[1];
paramsArray.push(array);
}
}
// 返回参数数组
return paramsArray;
}
// 根据指定的参数名称获取对应的参数值
function getParamValue(name) {
var paramsArray = getUrlParams();
if (paramsArray != null) {
for (var i = 0; i < paramsArray.length; i++) {
for (var j in paramsArray[i]) {
if (j == name) {
return paramsArray[i][j];
}
}
}
}
return null;
}
function test()
{
alert("v="+getParamValue("name"));
}
var test1= function()
{
//alert("v1="+getParamValue("name"));
//alert("v2="+GetUrlParam("name"));
//alert("v3="+GetUrlParms("name"));
alert("v4="+getQuery("name"));
}
基于正则表达式的参数匹配方法function GetUrlParam(paramName) {
var url = document.URL; // 获取当前页面URL，也可使用window.location.href
var oRegex = new RegExp('[\?&]' + paramName + '=([^&]+)', 'i');
//var oMatch = oRegex.exec( window.top.location.search ) ; // 获取当前窗口URL
var oMatch = oRegex.exec(url);
if (oMatch && oMatch.length > 1)
return oMatch[1]; // 返回匹配到的参数值
else
return '';
}
// 另一种获取URL参数的方法
function GetUrlParms(name) {
var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
if (reg.test(location.href))
return unescape(RegExp.$2.replace(/\+/g, " "));
return "";
}
var getQuery = function (i) {
var j = location.search.match(new RegExp("[?&]" + i + "=([^&]*)(&?)", "i"));
return j ? j[1] : j
};
</script>
测试JS获取地址栏参数：<br>
<a href="#" onclick="test1();">点击获取参数值</a>