js获取 url 参数值的方法总结

2024-07-11 14:16| 来源: 网络整理| 查看: 265

今天小编碰到一个朋友问这么一个问题，怎么在一个页面中获取另外一个页面url传过来的参数呢？最初一开始很本能的想到了用 split("?")，这样一步步的分解出需要的参数。但是想了一下，这样写起来比较绕，也不易懂，肯定会有更加简单的方法的！最后在网上找到了几个简单实用的方法，通过小编的测试验证是没有问题的，现在将具体的方法总结如下:

1、split拆分法；

通过对返回的URL字符串截取的方式获取参数值。

　　1）、函数一：获取URL中的参数名及参数值的集合

/** * [获取URL中的参数名及参数值的集合] * 示例URL:"http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪"; * @param {[string]} urlStr [当该参数不为空的时候，则解析该url中的参数集合] * @return {[string]} [参数集合] */ function GetRequest(urlStr) { if (typeof urlStr == "undefined") { // 获取url中"?"符后的字符串 var url = decodeURI(location.search); } else { var url = "?" + urlStr.split("?")[1]; } 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]] = decodeURI(strs[i].split("=")[1]); } } return theRequest; }

测试调用方法：

let url = "http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪"; // 第一种：无参数（不传url，直接从当前浏览器的url获取） let params01 = GetRequest(); console.log(params01); // {uid: "admin", passWord: "123456", fid: "1314", name: "阿豪"} console.log(params01['name']); // 阿豪 // 第二种：传url let params02 = GetRequest(url); console.log(params02); // {uid: "admin", passWord: "123456", fid: "1314", name: "阿豪"} console.log(params02['name']); // 阿豪

　　2）、函数二：通过参数名获取url中的参数值

/** * [通过参数名获取url中的参数值] * 示例URL:"http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪"; * @param {[string]} queryName [参数名] * @return {[string]} [参数值] */ function GetQueryValue(queryName) { debugger; var query = decodeURI('window.location.search'.substring(1)); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == queryName) { return pair[1]; } } return null; }

测试调用方法：

let name = GetQueryValue('name'); console.log(name); // 阿豪

2、正则法；

通过对返回的URL字符串，采用正则获取到参数值。

1）、正则法用法一：

/** * [通过参数名获取url中的参数值] * 示例URL:"http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪"; * @param {[string]} queryName [参数名] * @return {[string]} [参数值] */ function GetQueryValue(queryName) { debugger var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i"); // 获取url中"?"符后的字符串并正则匹配 var r = window.location.search.substr(1).match(reg); if (r != null) { return decodeURI(r[2]); } else { return null; } }

测试调用方法：

let queryVal = GetQueryValue('name'); console.log(queryVal); // 阿豪

2）、正则法用法二：

/** * [通过参数名获取url中的参数值] * 示例URL:"http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪"; * @param {[string]} queryName [参数名] * @return {[string]} [参数值] */ function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); var context = ""; if (r != null) context = r[2]; reg = null; r = null; return context == null || context == "" || context == "undefined" ? "" : context; }

测试调用方法：

let queryVal = GetQueryValue('name'); console.log(queryVal); // 阿豪

3、单个参数的获取方法

/** * 获取url中只有一个参数的参数值] * 示例URL: "http://test/getIndex/indexRequest.html?name=阿豪"; * @return {[string]} [参数值] */ function GetRequestValue() { // 获取url中"?"符后的字串 var url = location.search; // 判断是否有参数 if (url.indexOf("?") != -1) { // 从第一个字符开始因为第0个是?号获取所有除问号的所有符串 var str = url.substr(1); strs = str.split("="); return strs[1]; } return null; }

测试调用方法：

let queryVal = GetRequestValue(); console.log(queryVal); // 阿豪

获取更多内容，请关注我的个人微信公众号【程序员Style】，每天会分享新的技术、知识，工作中的常见问题，更多资料视频等，关注回复“666”即可获取学习资料。

【本文地址】

公司简介

联系我们