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) {
    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”即可获取学习资料。