查詢字符串轉(zhuǎn)對(duì)象

接下來(lái)給大家介紹一個(gè)封裝的函數(shù)，可以通過(guò)這個(gè)函數(shù)將一個(gè)url地址中的查詢字符串提取出來(lái)，并且轉(zhuǎn)換為一個(gè)對(duì)象。

總所周知，url地址的組成為：

            協(xié)議：//域名：端口/資源路徑？查詢字符串#hash

        通過(guò)這個(gè)我們可以發(fā)現(xiàn)，查詢字符串在url地址中是在“？”后面“#”號(hào)的前面，但是查詢字符串和#hash都是可以有可無(wú)的，所以我們就需要先進(jìn)行一個(gè)判斷，然后再進(jìn)行接下來(lái)的操作。在判斷之前我們需要先獲取“？”和“#”在url字符串中的索引位置。

    var star = url.indexOf("?"),//查詢字符串起始位置索引
        end = url.indexOf("#");//查詢字符串結(jié)束位置索引

然后再判斷“？”和“#”是否存在。

    if(star === -1) //判斷是否存在查詢字符串,返回-1則不存在
        return null;
    star += 1;//后面用slice（）方法截取查詢字符串，所以我們需要將star的值加一
    if(end === -1) //判斷是否有#hash
        end = url.length;

判斷結(jié)束之后就可以進(jìn)行轉(zhuǎn)換了，代碼如下

    var str = url.slice(star, end);//截取查詢字符串
    str = str.split("&");//將字符串切割為一個(gè)一個(gè)的等式
    var obj = {};
        for(var i in str){
            var strs = str[i].split("=");//將等式切割為左右兩個(gè)元素，左邊的是對(duì)象的name，右邊則是相應(yīng)的值
            obj[strs.shift()]=strs.shift();//添加到對(duì)象中
        }
    return obj;

這樣，這個(gè)函數(shù)就定義好了。

注：slice（start，end）方法是從索引為start的位置截取到索引為end的位置，包括start，但是不包括end。




歡迎關(guān)注微信公眾號(hào):猴哥說(shuō)前端