title: Parse String using split() into JSON or Object using Javascript of JQuery
body: <p>I am getting a passed a String that is in a unique format(is consistant though) that I need to be able to parse it so that I can modify pieces of it and then put it back together and pass it back as a string.</p>
  
  <p>Here is the String im getting passed. The contents of it will change regularly, but each items structure will remain the same.</p>
  
  <pre><code>    View
  {
      Name: View1;
      Image
      {
          BackgroundImage: Image.gif;
          Position: 0, 0;
          Width: 320;
          Height: 480;
      }
  
      Button
      {
          BackgroundImage: Button.gif;
          Transition: View2;
          Position: 49, 80;
          Width: 216;
          Height: 71;
      }
  
      Button
      {
          BackgroundImage: Button2.gif;
          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;
      }
      Scroll
      {
          Position: 106, 91;
          Width: 96;
          Height: 34;
          Button{
              BackgroundImage: Button2.gif;
              Position: 65, 217;
              Width: 188;
              Height: 134;
          }
          Button{
              BackgroundImage: Button2.gif;
              Position: 65, 217;
              Width: 188;
              Height: 134;
          }
  
      }
  
  }
  </code></pre>
  
  <p>I think I need a recursive function that will seek out each k,v and put it into a proper Object or JSON file so that I can modify. The furthest that I have got is being able to Parse a single level and put it into an k,v object. Here is the code and the string it Parses.</p>
  
  <p>modified string to work with my code(single level deep. I dropped View{} and Scroll{}):</p>
  
  <pre><code>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: 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 &lt; result.length; i++) {
              var key = result[i].split('{');
              var value = result[i].replace(key[0], '') + '}';
              obj.Controls[nextProp(key[0])] = value;
          }
  
          var initObjectList = '&lt;div id="prePop"&gt;';
          $.each(obj.Controls, function (k, v) {
          initObjectList += '&lt;div class="inLineObjects"&gt;' + '&lt;div class="key"&gt;' + k + '&lt;/div&gt;&lt;br/&gt;' + '&lt;div  class="value"&gt;' + v + '&lt;/div&gt;' +'&lt;/div&gt;';
  
          });
      initObjectList += '&lt;/div&gt;';
      $('#code').append(initObjectList)
  </code></pre>
  
  <p>RETURNS:</p>
  
  <pre><code>{
      "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;}"
      }
  }
  </code></pre>
  
  <p>My problem is that the above doesnt allow me to a). target anything iside the {} because its all a value and b). it doesnt have any type of recursive ability to deal with the multiple levels i.e. View>button>scrollview</p>
  
  <p>Any help on this would be greatly appreciated!</p>