本文汇总了JavaScript中获取URL参数值的4种常用方法，包括正则匹配、字符串拆分及单个参数提取。通过具体代码示例，详细解析了各方法的实现逻辑与适用场景，帮助开发者在没有框架支持时高效处理前端URL参数解析任务。
获取URL参数的4种方法概述
在前端开发工作中，解析URL参数是一项高频操作，特别是在未引入第三方框架的环境下。本文梳理了JavaScript环境下获取URL参数的4种实现方案，旨在为开发者提供实用的参考。
方法一：正则表达式匹配
第一种方案：基于正则表达式的方法
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"));
方法二：字符串拆分处理
第二种方案：利用字符串split进行拆分
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;
}
var Request = new Object();
Request = GetRequest();
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request['参数1'];
// 参数2 = Request['参数2'];
// 参数3 = Request['参数3'];
// 参数N = Request['参数N'];
方法三：推荐的正则实现
第三种方案：优化后的正则匹配（推荐）
利用JavaScript提取URL参数是常见需求。例如，面对URL：http://wwww.jb51.net/?q=js，若需获取参数q的值，可调用以下函数实现。
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
var context = "";
if (r != null)
context = decodeURIComponent(r[2]);
reg = null;
r = null;
return context == null || context == "" || context == "undefined" ? "" : context;
}
alert(GetQueryString("q"));
方法四：单个参数提取
第四种方案：针对单个参数的提取方法
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
if (url.indexOf("?") != -1) { //判断是否有参数
var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
strs = str.split("="); //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
alert(strs[1]); //直接弹出第一个参数 （如果有多个参数 还要进行循环的）
}
}至此，关于JavaScript获取URL参数值的4种方法介绍完毕。如需了解更多相关内容，建议查阅本站过往文章或继续阅读后续介绍，感谢大家的支持。