js獲取 url 參數值的方法總結

今天小編碰到一個朋友問這麼一個問題，怎麼在一個頁面中獲取另一個頁面url傳過來的參數呢？最初一開始很本能的想到了用 split("?")，這樣一步步的分解出須要的參數。可是想了一下，這樣寫起來比較繞，也不易懂，確定會有更加簡單的方法的！最後在網上找到了幾個簡單實用的方法，經過小編的測試驗證是沒有問題的，如今將具體的方法總結以下:

 

一、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); // 阿豪

 

二、正則法；

經過對返回的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); // 阿豪

三、單個參數的獲取方法

/**
 * 獲取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」便可獲取學習資料。