Javascript：像搜索查询字符串一样解析数组答案

【问题标题】：Javascript: Parse array like search querystringJavascript：像搜索查询字符串一样解析数组
【发布时间】：2013-07-27 17:22:28
【问题描述】：

这是我的 javascript 中的字符串

var searchString = City=20&Region=67&&Interests[8]=8&Interests[13]=13&Interests[4]=4&Duration[1]=Full+Day+Tour&Duration[3]=Evening+Tour&Duration[5]=2+Day+Short+Break&Departs[Fri]=Fri&Departs[Sat]=Sat&Departs[Sun]=Sun&TourLanguages=1&action_doSearch=Update

我有一个功能

function loadDataFrom(request){

        //if request if empty then return
        if(request == "") 
            return;

        var request = decodeURIComponent(request);

        //if we get there then its likely we have a search query to process
        var searchCriteria = request.split('&');
        var hash = {};

        for(var i = 0; i < searchCriteria.length; i++) {
            var val = searchCriteria[i].split('=');

            //we can safely ignore the "view" and 'action_doSearch' becuase they are not searched on
            if(unescape(val[0]) === 'view' || unescape(val[0]) === 'action_doSearch')
                continue;

            //filter objects without any values
            if(val[1] != '')
                //add the names and values to our object hash
                hash[unescape(val[0])] = unescape(val[1]);

        }


        //iterate over the hash objects and apply the current selection 
        $.each(hash, function(index, value) {
            switch (index) {
                case 'City':
                case 'Region':
                case 'TourLanguages':
                  //do stuff;
                    break;

                case 'Duration[]':
                case 'Departs[]':
                    //do something esle


                default:
                    break;

            }           
        });
    };

将 URL 参数解析为具有以下值的对象哈希。

City: "20"
Region: "67"
Departs[Fri]: "Fri"
Departs[Sat]: "Sat"
Departs[Sun]: "Sun"
Duration[1]: "Full+Day+Tour"
Duration[3]: "Evening+Tour"
Duration[5]: "2+Day+Short+Break"
Interests[4]: "4"
Interests[8]: "8"
Interests[13]: "13"
TourLanguages: "1"

但我真正想做的是将 url 分成数组，就像这样的值

City: "20"
Region: "67"
Departs: ["Fri","Sat","Sun"]
Duration: ["Full+Day+Tour", "Evening+Tour", "2+Day+Short+Break"]
Interests: ["4", "8", "13"]
TourLanguages: "1"

非常感谢有关此问题的任何帮助/指针。提前致谢

【问题讨论】：

你能提供你实际使用的功能吗？
我现在已经将解析功能添加到问题@LightStyle

标签： javascript regex arrays url javascript-objects

【解决方案1】：

对于这样的事情，为了让自己更容易，我会编写一个 RegExp 来获取零件，然后执行一些if 逻辑来决定如何构造 Object em>。

var searchString = "City=20&Region=67&&Interests[8]=8&Interests[13]=13&Interests[4]=4&Duration[1]=Full+Day+Tour&Duration[3]=Evening+Tour&Duration[5]=2+Day+Short+Break&Departs[Fri]=Fri&Departs[Sat]=Sat&Departs[Sun]=Sun&TourLanguages=1&action_doSearch=Update",
    o = {};

('&' + searchString)
    .replace(
        /&([^\[=&]+)(\[[^\]]*\])?(?:=([^&]*))?/g,
        function (m, $1, $2, $3) {
            if ($2) {
                if (!o[$1]) o[$1] = [];
                o[$1].push($3);
            } else o[$1] = $3;
        }
    );

o; /*
{
    "City": "20",
    "Region": "67",
    "Interests": ["8", "13", "4"],
    "Duration": ["Full+Day+Tour", "Evening+Tour", "2+Day+Short+Break"],
    "Departs": ["Fri", "Sat", "Sun"],
    "TourLanguages": "1",
    "action_doSearch": "Update"
} */

【讨论】：

我刚刚将我当前的解析功能添加到我上面的问题中。我会尝试执行您的更改，看看效果如何。
这是一个优雅的解决方案，而且速度很快:)。谢谢

【解决方案2】：

我会这样做：

var str = 'City=20&Region=67&&Interests[8]=8&Interests[13]=13&Interests[4]=4&Duration[1]=Full+Day+Tour&Duration[3]=Evening+Tour&Duration[5]=2+Day+Short+Break&Departs[Fri]=Fri&Departs[Sat]=Sat&Departs[Sun]=Sun&TourLanguages=1&action_doSearch=Update',
    strsplit = str.split(/&+/),
    o = {};

for (var i = 0, l = strsplit.length; i < l; i++) {

    var r = strsplit[i].match(/^([^=\[\]]+)(?:\[[^\]]+\])?=(.*)$/);

    if (o[r[1]] === undefined) {
        o[r[1]] = r[2];
    } else if (o[r[1]].push) {
        o[r[1]].push(r[2]);
    } else {
        o[r[1]] = [o[r[1]], r[2]];
    }

}

【讨论】：

【解决方案3】：

这是使用 Map-Reduce 的完美场景，我建议您使用 underscore.js 来实现一些简单、优雅且更具可读性的解决方案。

var m = _.map(searchString.split('&'), function (item) {
    var parts = item.split('='), names = parts[0].split('[');
    return [names[0], parts[1]];
});

var result = _.reduce(m, function(memo, item){
    var key = item[0], value = item[1];
    if(memo[key] === undefined) memo[key] = [value]
    else memo[key].push(value)
    return memo;
}, {});

console.log(result);

【讨论】：