Question

我在解析此字符串时遇到问题。

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

该字符串包含我需要在DOM中定位和调整大小的文本对象和图像对象的高度，宽度，x和y坐标。

数组中的前2个值是文本字段数和图像数（我将在循环中使用它作为最大迭代次数）。

我需要解析数值，并将它们推送到这些单独的数组中。

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

例如在＆＃34; img1x:51＆＃34; （图像1，Y坐标），数字 51 将被推入位置 0 的 imgXcoords 数组。

和＆＃34; img2y:111＆＃34; （图像2，Y坐标），数字 111 将被推入位置 1 的 imgYcoords 数组。

和＆＃34; txt2w:303＆＃34; （textfield 2，width），数字 303 将被推入位置1的 txtBoxWidth 数组。

如果有人能告诉我如何使用循环将img（i）x和img（i）y值推入他们的数组（imgXcoords和imgYcoords），我可以从中找出其余部分。

我只是不知道在字符串中搜索我要查找的内容的最有效方法，并将其推入正确的数组。

我尝试了这个用于图像的x坐标，但我的开始和结束位置都已关闭。

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

如果我发送＆＃34; res＆＃34;到console.log，我得到：结果1","img1y:111","im。

当我把它放入一个循环中时，sub＆＃34; 1＆＃34;如果var i = 0，则会变得更加古怪。

这是我尝试的一个方面：http://jsfiddle.net/S9RGH/

Answer 1

split是你的朋友。看看我在这里做了什么有助于：jsfiddle

您可以使用split将字符串细分为单独的名称/值对，并将它们放在一个数组中以便于访问。

Answer 2

虽然这不是我称之为最有效的代码，但我认为这是最易读的解决方案...

如果它被证明是一个重大的性能影响，我只会优化它。为了优化它，我将浏览data对象并将其转换为更清晰的结构进行解析。

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;

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

2 个答案: