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

解析此字符串时遇到问题

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

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

数组中的前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();

例如，在“

img1x:51

”（图1，Y坐标）中，数字51将被推入位置0的imgXcoords数组中

在“

img2y:111

”（图2，Y坐标）中，编号111将被推入位置1的imgYcoords数组中

在“

txt2w:303

”（文本字段2，宽度）中，数字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));

如果我将“res”发送到console.log，我会得到： 因此，

1”、“img1y:111”、“im

当我把它放到一个循环中，然后用var I=0将其分为“1”，它会变得更加古怪

---

下面是我的一点尝试：

虽然这不是我所说的最有效的代码，但我相信这是最可读的解决方案

只有当它被证明是一个重大的性能打击时，我才会对它进行优化。为了优化它，我将遍历

数据

对象，并将其转换为更干净的结构进行解析

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;   

var数据=[
“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”、“txt1x:391”、“txt1x:11X”、“TXT111”、“TXT1679”、“TXTXT:679”“txt2x:399”、“txt2y:329”、“TXTXT2Y:329”、“TXTXT2X:392”、“TXTXT2Y:249”、“txt2y:249”、“TXTXT2Y:249”、“TXTXT2Y:249”、“txt2y:249”、“TXT1Y:112”、“TXT1Y:112”、“TXTXT2Y:249”、“txt2y:249”、“TXX:249”、“txt2y:249”、“TXX:249”、“TXX:249”、“txt2y:249”、“TXX:249”、“392:392”、“392”、“392”、“TXX:392”、“TXX:392”、“TXX:392”、“TXX:392”、“TXX:392”、“TXX:392”、“TXX:392”、“2”、“TXX:392”、“TX2”、“TXX:392”、“TX2”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“",，“txt3Py:409”、“txt3Dx:392”、“txt3Dy:372”
];
var imgXcoords=[]；
var imgYcoords=[]；
var imgHeight=[]；
var imgWidth=[]；
var桶；
//简化
//我们正在查找的字段的名称
变量字段=[“img？x”、“img？y”、“img？h”、“img？w”]；
//它们进入的阵列。
//保持这些字段与上面的“字段”顺序相同。
var dests=[imgXcoords，
伊姆吉库德，
伊姆盖特，
imgWidth
];
//由于计数从“1”开始
var imageCount=+数据[1]+1；
//浏览图片
对于（变量i=0；i

split

是你的朋友。看看我在这里所做的是否有帮助：

---

您可以使用

split

将字符串分割为单独的名称/值对，并将它们放入数组中以便于访问。

对于初学者，使用

拆分，

是

newParams

数组吗？因为如果是，则开头缺少一个

[

，而开头缺少一个

]

结尾处。newParams是一个数组。我编辑了我的问题以反映这一点。是否有任何特别的理由在

[]

上使用

new array（）

？如果您查看问题底部的JSFIDLE链接，您可以确切地看到我尝试了什么。