獲取Url地址中參數的3種方法


獲取Url的代碼如下:window.location.href;

方法一:原生js(假設已經獲得了Url地址)

var url = 'https://gitbook.cn/gitchat/geekbooks?tag=JavaScript&name=pwwu&age=24';
        var temp1 = url.split('?');
        var pram = temp1[1];
        var keyValue = pram.split('&');
        var obj = {};
        for (var i = 0; i<keyValue.length; i++){
            var item = keyValue[i].split('=');
            var key = item[0];
            var value = item[1];
            obj[key] = value;
        }
        console.log(url);
        console.log(temp1);    //  ['https://gitbook.cn/gitchat/geekbooks','tag=JavaScript&name=pwwu&age=24']
        console.log(pram);     //  tag=JavaScript&name=pwwu&age=24
        console.log(keyValue); //  ['tag=JavaScript','name=pwwu','age=24']
        console.log(obj);      //  {tag:'JavaScript',name:'pwwu',age:'24'}

總結:主要思路就是將Url用split()分割成不同的塊,返回值為一個數組,一直分割到為 [‘tag=JavaScript’,‘name=pwwu’,‘age=24’]為止,
然后將該數組中的每一項以鍵值對的形式傳進一個空對象obj(這里需要遍歷數組),最后利用obj.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

方法三 使用正則表達式

//獲取url中的參數方法
        function getUrlParam(name) {
            //構造一個含有目標參數的正則表達式對象
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            //匹配目標參數
            var r = window.location.search.substr(1).match(reg);
            //返回參數
            if (r != null) {
                return unescape(r[2]);
            } else {
                return null;
            }
        }
        var ABC = getUrlParam();
        console.log(ABC);


本次暫時介紹以上3種,后續會不斷補充。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM