使用.split（）将String分解为数组

时间：2012-12-27 03:14:43

标签： javascript jquery json

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

这是字符串和代码：

$(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;}", }],
    }

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

感谢任何帮助

3 个答案:

答案 0 :(得分：0)

使用regexp可能会更好

// the regexp
var re = /(.+?)(\{.*?\})/g,
    group;

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 ret = {};

while(group = re.exec(content)) {
    var k = group[1],
        v = group[2];

    ret[k] = ret[k] ? ret[k].substring(0, ret[k].length - 1) + v.substring(1, v.length) : v;
}


// output
console.log(ret);   // => {'Button': '{xxx}', 'Image': '{xxxx}', 'Label': '{xxxx}'}

答案 1 :(得分：0)

这应该产生您想要的输出： 

$(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;}"
    }
}

答案 2 :(得分：0)

试试这个。如果您想要任何键值定位，可以将其解析为JSON。但我认为这不是有效的JSON。

var content='Image{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}' +
'Button{BackgroundImage: Button.gif;Position: 49, 80;Width: 216;Height: 71;}' +
'Button2{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;}';

// add colons after the keys
content = content.replace(/([\w]+){/g, '"$1":{');

// wrap all {} in quotes
content = content.replace(/({[^}]+})/g, '"$1",');

// remove trailing comma
content = content.slice(0, -1);

content = '{"Controls": [{' + content + '}]}';

console.log(content);
相关问题
最新问题