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