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

今天小编碰到一个朋友问这么一个问题，怎么在一个页面中获取另外一个页面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) {debuggervar 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”即可获取学习资料。

js获取 url 参数值的方法总结相关推荐

js获取url参数值的方法总结
js获取url参数值的方法总结 1.方式一:通过字符串截取的方式获取参数值: 2.方式二:通过正则获取到参数值: 1.方式一:通过字符串截取的方式获取参数值: 1).函数一:获取URL中的参数名及 ...
js获取url参数值的方法总结(亲测)
1.方式一:通过字符串截取的方式获取参数值: 1).函数一:获取URL中的参数名及参数值的集合 /*** [获取URL中的参数名及参数值的集合]* 示例URL:http://htmlJsTest/ge ...
js获取url参数值
2019独角兽企业重金招聘Python工程师标准>>> 方法一:正则分析法 function getQueryString(name) { var reg = new RegE ...
js 获取url参数的方法
浏览器提供了一个新的接口来获取 url参数------------- URLSearchParams // 示例 https://www.baidu.com?id=2&isCheck=2 le ...
js获取url路径的方法
url = window.location.href; 获取完整的路径,但获取的使用unicode编码过的可以使用unescape(url)方法转化成英文,但url中有汉字,使用该方法,汉字会乱码 ...
js获取url参数的方法
简单方便 function getVariable(url, key) {url = new URL(url);return url.searchParams.get(key) }const url2 ...
【转】js获取url传值
js获取url参数值 index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&...... 静态html文件js读取url参数根据获取ht ...
js 获取url参数问题
网上常常找到的js获取url参数的方法是: /** * @param {String} name 参数名称 * @param {String} url 请求的Url,可以填,如果不填为当 ...
JS获取URL中参数值（QueryString）的4种方法分享
http://www.jb51.net/article/48942.htm JS获取URL中参数值(QueryString)的4种方法分享作者: 字体:[增加减小] 类型:转载今天碰到要在一个页 ...

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

1、split拆分法；

2、正则法；

3、单个参数的获取方法

js获取 url 参数值的方法总结相关推荐

最新文章

热门文章