Question

Input:

Such as: url = www.youzan.com?name=coder&age=20&callback=https%3A%2F%2Fyouzan.com%3Fname%3Dtest&list[]=a&json=%7B%22str%22%3A%22abc%22, %22num%22%3A123%7D

Output:

{
  name: "coder".age: "20".callback: "https://youzan.com?name=test".list: ["a"].json: {
      str: 'abc'.num: 123}}Copy the code

Key factors analysis

1. Some special symbols in the URL are garbled and need to be decoded.

Here use JavaScript own decodeURIComponent(URL) method for decoding, can also write decode function.

[‘%3A’ => ‘:’], [‘%2F%2F’ => ‘//’] [‘%3F’ => ‘?’] [‘%3D’ => ‘=’]

//url = https://www.youzan.com?name=coder&age=20&callback=https%3A%2F%2Fyouzan.com%3Fname%3Dtest&list[]=a&json=%7B%22str%22%3A%2 2abc%22,%22num%22%3A123%7D
url = decodeURIComponent(url);
//url = https://www.youzan.com?name=coder&age=20&callback=https://youzan.com?name=test&list[]=a&json={"str":"abc","num":123}
Copy the code

2. You can’t use regular ‘? ‘Separate out the parameter parts

Because callback=youzan.com? Name =test also contains a question mark, will lead to segmentation error. It is more reasonable to split each parameter directly with the concatenation symbol ‘&’ for each parameter.

let paramArrays = url.split('&');
Copy the code

3. Deal with the redundant prefixes of the first parameter.

The first parameter contains the access address, which needs to be removed.

Note that name=test occurs when the callback argument is placed in the first argument. Method two is to improve the method.

/ / method
paramArrays[0]= paramArrays[0].split('? ') [1];
/ / method 2
paramArrays[0] = paramArrays[0].split('? ');
paramArrays[0].shift();
paramArrays[0] = paramArrays[0].join('? ');
Copy the code

4. Split each parameter item into key-value pairs. Note equal = special case

For example: callback=youzan.com? Name = test parameter value also carries =, use method 1 also causes the first value = after the content is lost, improve method 2.

/ / method
let itemArray = item.split('=');
let key = itemArray[0], value = itemArray[1]; / / lost 'test'
/ / method 2
let itemArray = item.split('=');
let key = itemArray.shift(), value = itemArray.join('='); // Pay attention to multiple equal sign cutting problems
Copy the code

Answer

const testURL = 'https://www.youzan.com?name=coder&callback=https%3A%2F%2Fyouzan.com%3Fname%3Dtest&age=20&callback=https%3A%2F%2Fyouzan. com%3Fname%3Dtest&list[]=a&json=%7B%22str%22%3A%22abc%22,%22num%22%3A123%7D';
function parseQuery(url) {
    let decodeUrl = decodeURIComponent(url);
    let obj = {};
    let paramArrays = decodeUrl.split('&');
    paramArrays[0] = paramArrays[0].split('? ');
    paramArrays[0].shift();
    paramArrays[0] = paramArrays[0].join('? ');

    paramArrays.map((item) = > {
        let itemArray = item.split('=');
        let key = itemArray.shift(), value = itemArray.join('='); // Pay attention to multiple equal sign cutting problems
        // Handle the list[]=a special case
        if(key.indexOf('[') + 1 === key.indexOf('] ')) {
            key = key.slice(0, key.length-2);
            value = [].concat(value);
        }
        obj[key] = value;
    })
    return obj;
}
parseQuery(testURL)

Copy the code
“The above is purely personal answers, welcome to point out the shortcomings!”