Decoding URL parameters with JavaScript

Solution 1:

Yes it is true that decodeURIComponent function doesn't convert + to space. So you have to replace the + using replace function.

Ideally the below solution works.

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

Solution 2:

• decodeURI is meant to be used for whole URI, i.e. it doesn't decode separators like ?, &, =, +, etc.
• for decoding parameters decodeURIComponent should be used
  (worth to have a look at: What is the difference between decodeURIComponent and decodeURI? )
• string that you are trying to decode might actually contain + encoded as %2B, thus you should not replace + after the conversion since you might lost + signs that you actually want there, e.g. something?num=%2B632+905+123+4567 should become:
  something?num=+632 905 123 4567
  since you are probably going to extract the number: +632 905 123 4567

So the correct way to do this is:

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

Solution 3:

The plus sign is not encoded/decoded. To see the decode function working, you need to pass a encoded URI first. Take a look:

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

Will generate: http://www.foo.com/bar?foo=foo%20bar%20jar, i.e., the encoded URI.

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

Will generate: http://www.foo.com/bar?foo=foo bar jar, i.e., the decoded URI.

Solution 4:

The below code will decode and gives you the params in form of objects

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;
    }
}