JavaScript解析URL查询参数的两种常用方法

作者:函数茶馆

时间:2026-10-22

浏览:232

本文介绍了JavaScript中解析URL查询参数的两种常用方法:正则表达式分析法用于获取特定参数值,对象解析法用于将整个URL参数字符串转换为键值对对象。通过具体代码示例展示了如何提取和处理URL中的查询参数,适用于前端开发中的常见需求。

文章目录

JavaScript解析URL查询参数的两种常用方法

接下来直接展示相关代码实现。


var path = 'www.u.com/home?id=2&type=0&dtype=-1';
function parseUrl(url){
  var result = [];
  var query = url.split("?")[1];
  var queryArr = query.split("&");
  queryArr.forEach(function(item){
    var obj = {};
    var value = item.split("=")[0];
    var key = item.split("=")[1];
    obj[key] = value;
    result.push(obj);
  });
  return result;
}
console.log(parseUrl(path)); 
//[{id: '2'},{type: '0'},{dtype: '-1'}]

下面介绍两种在JavaScript中获取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")); 

方法二:参数对象化

第二种方法:将参数转换为对象。

具体代码实现如下:


<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>

以上即为JS解析URL查询参数的相关内容。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章