使用.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;}" 
    } 
} 

Answer 2

使用正则表达式可能会更好

// 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}'} 

Answer 3

试试这个。如果您想要以任何关键值为目标，您可以将其解析为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);