使用 JavaScript 解码 URL 参数答案

【问题标题】：Decoding URL parameters with JavaScript使用 JavaScript 解码 URL 参数
【发布时间】：2012-08-16 01:47:07
【问题描述】：

这应该是一项简单的任务，但我似乎找不到解决方案。

我有一个基本字符串作为查询字符串参数传递，如下所示：This+is+a+message+with+spaces。我想使用 JavaScript 将该参数解码为This is a message with spaces，但我似乎无法对其进行解码。

我尝试了decodeURI('This+is+a+message+with+spaces')，但结果仍然包含+ 符号。

【问题讨论】：

stackoverflow.com/questions/4292914/…
URL需要编码才能解码;)
Locrizak，decodeURIComponent('This+is+a+message+with+spaces') 仍然返回 This+is+a+message+with+spaces。 encodeURIComponent('This+is+a+message+with+spaces') 返回This%2Bis%2Ba%2Bmessage%2Bwith%2Bspaces。我一定错过了什么，因为我没有看到这是如何解决我的问题的。

标签： javascript html forms decoding url-parameters

【解决方案1】：

加号未编码/解码。要查看 decode 函数是否正常工作，您需要先传递一个编码的 URI。看看：

encodeURI( "http://www.foo.com/bar?foo=foo bar jar" )

将生成：http://www.foo.com/bar?foo=foo%20bar%20jar，即编码后的 URI。

decodeURI( "http://www.foo.com/bar?foo=foo%20bar%20jar" )

将生成：http://www.foo.com/bar?foo=foo bar jar，即解码后的 URI。

【讨论】：

【解决方案2】：

是的，确实 decodeURIComponent 函数不会将 + 转换为空格。所以你必须使用替换功能替换+。

理想情况下，以下解决方案有效。

var str_name = 'This+is+a+message+with+spaces';
decodeURIComponent((str_name + '').replace(/\+/g, '%20'));

【讨论】：

这是更好的答案。 encodeURIComponent 可能会选择不将空格编码为+，更喜欢%20，但URI 可能来自其他地方，而+ 是一个完全有效的空间编码，由于未知原因JS 的decodeURIComponent 决定忽略。
+ 不是有效的空间 uri 编码。有些网站只是选择用+、-、_等替换url中的空格，因为这样更易读，但不规范

【解决方案3】：

就像已经指出的那样，decodeURI 函数不会将 + 转换为空格，但是这里有一些事情值得实现：

decodeURI 用于整个 URI，即它不会解码 ?、&、=、+ 等分隔符。
解码参数应使用decodeURIComponent
（值得一看：What is the difference between decodeURIComponent and decodeURI?）
您尝试解码的字符串实际上可能包含编码为%2B 的+，因此您不应在转换后替换+，因为您可能会丢失您真正想要的+ 标志，例如something?num=%2B632+905+123+4567 应该变成：
something?num=+632 905 123 4567
因为您可能要提取数字：+632 905 123 4567

所以正确的做法是：

var str = 'something?num=%2B632+905+123+4567';
decodeURIComponent( str.replace(/\+/g, '%20') );

【讨论】：

【解决方案4】：

我创建了自己的字符串方法来支持所需的编码/解码。这些方法将正确处理 + 编码和解码，允许您在字符串中包含加号 (+) 并且仍然将原始空格编码为 +'s。

String.prototype.plusEncode = function() {
    return encodeURIComponent(this).replace(/\%20/gm,"+");
}

String.prototype.plusDecode = function() {
    return decodeURIComponent(this.replace(/\+/gm,"%20"));
}

【讨论】：

【解决方案5】：

下面的代码将解码并以对象的形式为您提供参数

export function getParamsFromUrl(url) {
    url = decodeURI(url);
    if (typeof url === 'string') {
        let params = url.split('?');
        let eachParamsArr = params[1].split('&');
        let obj = {};
        if (eachParamsArr && eachParamsArr.length) {
            eachParamsArr.map(param => {
                let keyValuePair = param.split('=')
                let key = keyValuePair[0];
                let value = keyValuePair[1];
                obj[key] = value;
            })
        }
        return obj;
    }
}

【讨论】：