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