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

目錄

•  1、方式一：通過字符串截取的方式獲取參數值；
• 2、方式二：通過正則獲取到參數值；

 

正文

回到頂部

 1、方式一：通過字符串截取的方式獲取參數值；

函數一：獲取URL中的參數名及參數值的集合

/**
 * [獲取URL中的參數名及參數值的集合]
 * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
 * @param {[string]} urlStr [當該參數不為空的時候，則解析該url中的參數集合]
 * @return {[string]}       [參數集合]
 */
function GetRequest(urlStr) {
    if (typeof urlStr == "undefined") {
        var url = decodeURI(location.search); //獲取url中"?"符后的字符串
    } 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;
}

var parms_1 = GetRequest();
console.log(parms_1); // {"uid":"admin","rid":"1","fid":"2","name":"小明"}
console.log(parms_1['name']); // '小明'
var parms_2 = GetRequest('http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明');
console.log(parms_2); // {"uid":"admin","rid":"1","fid":"2","name":"小明"}
console.log(parms_2['name']); // '小明'

函數二：URLSearchParams()函數

        var url2 = 'https://gitbook.cn/gitchat/geekbooks?tag=%E5%A4%A7%E6%95%B0%E6%8D%AE&name=gy&age=22';
        var temp2 = url2.split('?')[1];
        var pram2 = new URLSearchParams('?'+temp2);
        console.log(pram2.get('tag')); // 大數據
        console.log(pram2.get('name'));// gy
        console.log(pram2.get('age')); // 22
        console.log(temp2);   //tag=%E5%A4%A7%E6%95%B0%E6%8D%AE&name=gy&age=22

 

函數三：通過window.location.search對象，根據參數名獲取url中的參數值

/**
 * [通過參數名獲取url中的參數值]
 * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
 * @param  {[string]} queryName [參數名]
 * @return {[string]}           [參數值]
 */
function GetQueryValue(queryName) {
    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;
}

var queryVal=GetQueryValue('name');
console.log(queryVal);// 小明