在Javascript中解析复杂字符串的最有效方法

Question

I'm having trouble parsing this string.

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"]; 

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.

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).

I need to parse the number values, and push them in these individual arrays.

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();

For instance in " img1x:51 " (image 1, Y coord), the number 51 would be pushed into the imgXcoords array at position 0 .

and in " img2y:111 " (image 2, Y coord), the number 111 would be pushed into the imgYcoords array at position 1 .

and in " txt2w:303 " (textfield 2, width), the number 303 would be pushed into the txtBoxWidth array at position 1.

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.

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.

I tried this for the x coordinates of the images, but my start and end positions are way off.

var iX1 = newParams.indexOf("img"+(1)+"x");
var iX2 = (iX1 + 7);
var res = newParams.substr(iX2,(iX2+2));

if I send "res" to the console.log, I get: 1","img1y:111","im as a result.

When I put that into a loop, and sub "1" with var i=0, it gets even more wacky.

Here is a jfiddle of my attempt: http://jsfiddle.net/S9RGH/

Answer 1

split is your friend. See if what I did here helps: jsfiddle

You can use split to segment the string into individual name/value pairs and put them in an array for easy access.

Answer 2

While this isn't what I could call the most efficient code, it is I believe the most readable solution...

I'd only work about optimizing it if it turned out to be a major performance hit. To optimize it, I'd go through the data object and turn it into a cleaner structure to parse.

var data = [
  "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"
];

var imgXcoords = [];
var imgYcoords = [];
var imgHeight = [];
var imgWidth = [];

var bucket;

// Trimmed for simplicty
// The names of the fields we are looking for
var fields = ["img?x", "img?y", "img?h", "img?w"];

// The arrays they go in.
// Keep these in the same order as the 'fields' above.
var dests = [imgXcoords,
  imgYcoords,
  imgHeight,
  imgWidth
];


// Since the counts starts at '1'
var imageCount = +data[1] + 1;

// Go through the images
for (var i = 0; i < imageCount; i++) {

   // And each field we are looking for
  for (var ii = 0; ii < fields.length; ii++) {

    // Make the name of the thing we are looking for.
    var wantedKey = fields[ii];
    wantedKey = wantedKey.replace("?", i);

    // Then walk through the array. FUGLY
    // I know, but simple.
    for (var j = 0; j < data.length; j++) {

      // Split the value up.
      var arr = data[j].split(':');


      if (arr) {
        var currentKey = arr[0];
        // Force to a number
        var value = +arr[1];

        console.log([currentKey, wantedKey]);

         // we found what we want? Great!
        if (currentKey === wantedKey) {
          bucket = dests[ii];
          bucket.push(value);
          continue;
        }
      }
    }
  }
}

debugger;