javascript - 使用 .split() 将字符串分解为数组

Question

我正在尝试将一个字符串分解为一个数组。下面的这段代码确实做到了，但我现在需要将它分解成一个子数组。

这是字符串和代码:

$(document).ready(function() {
var content='Image{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}Button{BackgroundImage: Button.gif;Position: 49, 80;Width: 216;Height: 71;}Button{BackgroundImage: Button2.gif;Transition: View2;Position: 65, 217;Width: 188;Height: 134;}Label{Position: 106, 91;Width: 96;Height: 34;Text: "Button";FontSize: 32;Color: 0.12549, 0.298039, 0.364706, 1;}';

var result = content.split('}');
result.pop();// removing the last empty element
console.log(result);
for(var i=0;i<result.length;i++)
{
    result[i]+='}';
    console.log(result);
        $('div').append('<li>' + result[i] + '</li>');
}
})

这个输出:

<li>Image{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}</li>
<li>Button{BackgroundImage: Button.gif;Position: 49, 80;Width: 216;Height: 71;}</li>
<li>Button{BackgroundImage: Button2.gif;Transition: View2;Position: 65, 217;Width: 188;Height: 134;}</li>
<li>Label{Position: 106, 91;Width: 96;Height: 34;Text: "Button";FontSize: 32;Color: 0.12549, 0.298039, 0.364706, 1;}</li>

我现在需要做的是进一步分解它，以便我在 {} 之前有单词，即第一个图像

理想情况下，我希望输出是这样的键/值对象

    {
        "Controls": [{ "Image":"{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}", 
    "Button":"{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}", 
"Button":"{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}", 
    "Label":"{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}", }],
    }

我的主要目标是能够在此结束时定位键或值。

感谢任何帮助

Answer 1

这应该会产生您想要的输出:

$(document).ready(function() {
    var content='Image{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}Button{BackgroundImage: Button.gif;Position: 49, 80;Width: 216;Height: 71;}Button{BackgroundImage: Button2.gif;Transition: View2;Position: 65, 217;Width: 188;Height: 134;}Label{Position: 106, 91;Width: 96;Height: 34;Text: "Button";FontSize: 32;Color: 0.12549, 0.298039, 0.364706, 1;}';

    var result = content.split('}');
    result.pop();// removing the last empty element
    var obj = {Controls:{}};

    $.each(result, function (i, v) {
        var key = v.split('{');
        var value = v.replace(key[0], '') + '}';

        if (key[0] !== 'Button') {
            obj.Controls[key[0]] = value;
        } else {
            if (!obj.Controls.hasOwnProperty('Buttons')) {
                obj.Controls['Buttons'] = [];
            }   
            obj.Controls.Buttons.push(value);
        }
    });

    console.log(obj);
});​

工作演示: http://jsfiddle.net/fewds/TuNTV/2/

输出示例:

{
    "Controls": {
        "Image": "{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}",
        "Buttons": [
            "{BackgroundImage: Button.gif;Position: 49, 80;Width: 216;Height: 71;}",
            "{BackgroundImage: Button2.gif;Transition: View2;Position: 65, 217;Width: 188;Height: 134;}"
        ],
        "Label": "{Position: 106, 91;Width: 96;Height: 34;Text: \"Button\";FontSize: 32;Color: 0.12549, 0.298039, 0.364706, 1;}"
    }
}

如果你只想让多个键出现递增，你可以使用这个:

$(document).ready(function() {
    var content='Image{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}Image{BackgroundImage: Image2.gif;Position: 0, 0;Width: 320;Height: 480;}Button{BackgroundImage: Button.gif;Position: 49, 80;Width: 216;Height: 71;}Button{BackgroundImage: Button2.gif;Transition: View2;Position: 65, 217;Width: 188;Height: 134;}Button{BackgroundImage: Button3.gif;Transition: View2;Position: 65, 217;Width: 188;Height: 134;}Label{Position: 106, 91;Width: 96;Height: 34;Text: "Button";FontSize: 32;Color: 0.12549, 0.298039, 0.364706, 1;}Label{Position: 106, 91;Width: 96;Height: 34;Text: "Button";FontSize: 32;Color: 0.12549, 0.298039, 0.364706, 1;}';

    var result = content.split('}');
    result.pop();// removing the last empty element
    var obj = {Controls:{}};

    function nextProp(key) {
        if(obj.Controls.hasOwnProperty(key)) {
            var num = key.match(/\d+$/);
            if (num) {
                return nextProp(key.replace(num[0], '') + (parseInt(num[0], 10) + 1));
            } else {
                return nextProp(key + '1');
            }
        }

        return key;
    }

    for (var i = 0; i < result.length; i++) {
        var key = result[i].split('{');
        var value = result[i].replace(key[0], '') + '}';
        obj.Controls[nextProp(key[0])] = value;
    }

    console.log(obj);
});​

工作演示: http://jsfiddle.net/fewds/TuNTV/5/

输出示例:

{
    "Controls": {
        "Image": "{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}",
        "Image1": "{BackgroundImage: Image2.gif;Position: 0, 0;Width: 320;Height: 480;}",
        "Button": "{BackgroundImage: Button.gif;Position: 49, 80;Width: 216;Height: 71;}",
        "Button1": "{BackgroundImage: Button2.gif;Transition: View2;Position: 65, 217;Width: 188;Height: 134;}",
        "Button2": "{BackgroundImage: Button3.gif;Transition: View2;Position: 65, 217;Width: 188;Height: 134;}",
        "Label": "{Position: 106, 91;Width: 96;Height: 34;Text: \"Button\";FontSize: 32;Color: 0.12549, 0.298039, 0.364706, 1;}",
        "Label1": "{Position: 106, 91;Width: 96;Height: 34;Text: \"Button\";FontSize: 32;Color: 0.12549, 0.298039, 0.364706, 1;}"
    }
}