title: Most efficient way to parse a complex string in Javascript
body: <p>I'm having trouble parsing this string.</p>
  
  <pre><code>newParams=[ "3","2","img1x:51","img1y:111","img1h:209","img1w:330","img1Px:231","img1Py:291","img1Dx:44","img1Dy:104","img2x:51","img2y:331","img2h:100","img2w:329","img2Px:274","img2Py:408","img2Dx:44","img2Dy:324","txt1x:399","txt1y:119","txt1h:103","txt1w:303","txtBox1x:391","txtBox1y:111","txtBox1h:119","txtBox1w:319","txt1Px:679","txt1Py:199","txt1Dx:392","txt1Dy:112","txt2x:399","txt2y:249","txt2h:103","txt2w:303","txtBox2x:391","txtBox2y:241","txtBox2h:119","txtBox2w:319","txt2Px:679","txt2Py:329","txt2Dx:392","txt2Dy:242","txt3x:399","txt3y:379","txt3h:44","txt3w:304","txtBox3x:391","txtBox3y:371","txtBox3h:60","txtBox3w:320","txt3Px:680","txt3Py:409","txt3Dx:392","txt3Dy:372"]; 
  </code></pre>
  
  <p>The string contains the height, width, x and y coordinates of both text objects and image objects that I need to position and resize in the DOM. </p>
  
  <p>The first 2 values in the array are the number of textfields, and the number of images (which i was going to use in loops as the max number of iterations).</p>
  
  <p>I need to parse the number values, and push them in these individual arrays.</p>
  
  <pre><code>var textXcoords  = new Array();
  var textYcoords  = new Array();
  var textHeight  = new Array();
  var textWidth  = new Array();
  
  var txtBoxXcoords  = new Array();
  var txtBoxYcoords  = new Array();
  var txtBoxHeight  = new Array();
  var txtBoxWidth  = new Array();
  
  var textPullXcoords  = new Array();
  var textPullYcoords  = new Array();
  var textDragXcoords  = new Array();
  var textDragYcoords  = new Array();
  
  var imgXcoords  = new Array();
  var imgYcoords  = new Array();
  var imgHeight  = new Array();
  var imgWidth  = new Array();
  
  var imgPullXcoords  = new Array();
  var imgPullYcoords  = new Array();
  var imgDragXcoords  = new Array();
  var imgDragYcoords  = new Array();
  </code></pre>
  
  <p>For instance in "<code>img1x:51</code>" (image 1, Y coord), the number <strong>51</strong> would be pushed into the <strong>imgXcoords</strong> array at position <strong>0</strong>.</p>
  
  <p>and in "<code>img2y:111</code>" (image 2, Y coord), the number <strong>111</strong> would be pushed into the <strong>imgYcoords</strong> array at position <strong>1</strong>.</p>
  
  <p>and in "<code>txt2w:303</code>" (textfield 2, width), the number <strong>303</strong> would be pushed into the <strong>txtBoxWidth</strong> array at position 1.</p>
  
  <p>If someone can show me just how to push the img(i)x and img(i)y values into their arrays (imgXcoords and imgYcoords) using a loop, I can figure out the rest from there. </p>
  
  <p>I just don't know the most efficient way to search what I am looking for in the string and push it into the proper array. </p>
  
  <p>I tried this for the x coordinates of the images, but my start  and end positions are way off.</p>
  
  <pre><code>var iX1 = newParams.indexOf("img"+(1)+"x");
  var iX2 = (iX1 + 7);
  var res = newParams.substr(iX2,(iX2+2));
  </code></pre>
  
  <p>if I send "res" to the console.log, I get:
  <code>1","img1y:111","im</code> as a result.</p>
  
  <p>When I put that into a loop, and sub "1" with var i=0, it gets even more wacky.</p>
  
  <p>Here is a jfiddle of my attempt: <a href="http://jsfiddle.net/S9RGH/" rel="nofollow">http://jsfiddle.net/S9RGH/</a></p>