JavaScript解析URL编码的查询参数

我在JavaScript中解析URL编码的查询字符串参数时遇到了一个奇怪的问题

function getUrlVars() {

    var vars = [], hash;
    alert(window.location.href);
    var hashes = window.location.href.slice(decodeURIComponent(window.location.href).indexOf('?') + 1).split('&');
    alert(decodeURIComponent(window.location.href));
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

函数getUrlVars（）{ var vars=[]，散列； 警报（window.location.href）； var hashes=window.location.href.slice（decodeURIComponent（window.location.href）.indexOf（'？'））+1.split（'&'）； 警报（decodeURIComponent（window.location.href））； for（var i=0；i 网址：

---

值

“DZj9aEoyZ2I=“

是base64 URL编码的值，但解析不正确；它忽略

“%3d”

。请提出解决方案？

仅在提取值后对其进行解码

function getUrlVars() {

    var vars = {}, hash; url = 'http://domain/approveFile/ApproveFile.aspx?id=DZj9aEoyZ2I%3d';
    var hashes = url.slice(url.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars[hash[0]] = decodeURIComponent(hash[1]);
    }
    return vars;
}

函数getUrlVars（）{ var vars={}，hash；url=}http://domain/approveFile/ApproveFile.aspx?id=DZj9aEoyZ2I%3d'; var hashes=url.slice（url.indexOf（'？'））+1.split（'&'）； for（var i=0；i

---

这将为您提供

对象{id:“DZj9aEoyZ2I=“}

仅在提取值后对其进行解码

function getUrlVars() {

    var vars = {}, hash; url = 'http://domain/approveFile/ApproveFile.aspx?id=DZj9aEoyZ2I%3d';
    var hashes = url.slice(url.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars[hash[0]] = decodeURIComponent(hash[1]);
    }
    return vars;
}

函数getUrlVars（）{ var vars={}，hash；url=}http://domain/approveFile/ApproveFile.aspx?id=DZj9aEoyZ2I%3d'; var hashes=url.slice（url.indexOf（'？'））+1.split（'&'）； for（var i=0；i

---

这将为您提供

对象{id:“DZj9aEoyZ2I=“}

在

=

上拆分之前，您正在对部分进行解码，这意味着

%3d

被视为键值分隔符，在循环中以

哈希[2]

结束。这似乎是不希望出现的行为，因此修复方法是在所有

.split

之后对

decodeURIComponent

---

尝试将

foo[]

实现为列表功能，类似于您在php中找到的功能，发布繁荣

function getUrlVars() {
    var $_GET = Object.create(null), // for..in safe
        pairs = window.location.search.slice(1).split('&'),
        pair,
        i;
    for (i = 0; i < pairs.length; ++i) {
        pair = pairs[i].split('=');
        if (pair[0].slice(-2) === '[]') {
            pair[0] = pair[0].slice(0, -2);
            pair[0] = decodeURIComponent(pair[0]);
            if (pair[1]) pair[1] = decodeURIComponent(pair[1]); // don't assume this
            if (!(pair[0] in $_GET))
                $_GET[pair[0]] = [];
            else if (!Array.isArray($_GET[pair[0]]))
                $_GET[pair[0]] = [$_GET[pair[0]]];
            $_GET[pair[0]].push(pair[1]);
        } else {
            pair[0] = decodeURIComponent(pair[0]);
            if (pair[1]) pair[1] = decodeURIComponent(pair[1]); // don't assume this
            $_GET[pair[0]] = pair[1];
        }
    }
    return $_GET;
}

---

在

=

上拆分之前，您正在解码这些部分，这意味着

%3d

被视为键值分隔符，最后在循环中以

散列[2]

结束。这似乎是不希望出现的行为，因此修复方法是在所有

.split

之后对

decodeURIComponent

---

尝试将

foo[]

实现为列表功能，类似于您在php中找到的功能，发布繁荣

function getUrlVars() {
    var $_GET = Object.create(null), // for..in safe
        pairs = window.location.search.slice(1).split('&'),
        pair,
        i;
    for (i = 0; i < pairs.length; ++i) {
        pair = pairs[i].split('=');
        if (pair[0].slice(-2) === '[]') {
            pair[0] = pair[0].slice(0, -2);
            pair[0] = decodeURIComponent(pair[0]);
            if (pair[1]) pair[1] = decodeURIComponent(pair[1]); // don't assume this
            if (!(pair[0] in $_GET))
                $_GET[pair[0]] = [];
            else if (!Array.isArray($_GET[pair[0]]))
                $_GET[pair[0]] = [$_GET[pair[0]]];
            $_GET[pair[0]].push(pair[1]);
        } else {
            pair[0] = decodeURIComponent(pair[0]);
            if (pair[1]) pair[1] = decodeURIComponent(pair[1]); // don't assume this
            $_GET[pair[0]] = pair[1];
        }
    }
    return $_GET;
}

---

2016年，如果您使用ES6：

const getUrlParams = (search) => {
    let hashes = search.slice(search.indexOf('?') + 1).split('&')
    let params = {}
    hashes.map(hash => {
        let [key, val] = hash.split('=')
        params[key] = decodeURIComponent(val)
    })

    return params
}

console.log(getUrlParams(window.location.search))

---

2016年，如果您使用ES6：

const getUrlParams = (search) => {
    let hashes = search.slice(search.indexOf('?') + 1).split('&')
    let params = {}
    hashes.map(hash => {
        let [key, val] = hash.split('=')
        params[key] = decodeURIComponent(val)
    })

    return params
}

console.log(getUrlParams(window.location.search))

---

首先，使用

window.location.search.slice（1）

，而不是自己尝试解析URL的这一部分。其次，您在对

=

进行拆分之前对这些部分进行解码，这意味着

%3d

被视为键值分隔符，最终在循环中出现

散列[2]

。最后，我非常确定，您不应该在

“&”

上拆分，而应该在

/&（？amp；）/

上拆分，即

&

不是

&

（编辑时间不足）实际上关于

&

的最后一点是错误的，它被编码为

%26

，而不是

&foo是HTML实体的，sorry@PaulS.A正确的URL不应该对
&
进行编码。首先，使用
window.location.search.slice（1）
，而不是自己尝试解析URL的这一部分。其次，您在对
=
进行拆分之前对这些部分进行解码，这意味着
%3d
被视为键值分隔符，最终在循环中出现
散列[2]
。最后，我非常确定，您不应该在
“&”
上拆分，而应该在
/&（？amp；）/
上拆分，即
&
不是
&
（编辑时间不足）实际上关于
&
的最后一点是错误的，它被编码为
%26
，而不是
&foo是HTML实体的，sorry@PaulS.A正确的URL不应编码
&
。如果URL=location.href，则出现一个奇怪的问题，然后javascript读取为“DZj9aEoyZ2I=”而不是DZj9aEoyZ2I%3d。知道如何修复吗？如果URL=location.href，则出现一个奇怪的问题，然后javascript读取为“DZj9aEoyZ2I=”代替DZj9aEoyZ2I%3d，知道如何修复吗？