Question

我们的一个客户网站有一个表格，我们通过AJAX劫持和提交。最近我们得到了一个请求，要求它支持一个带有名称中预定义索引的复选框的流畅列表 - 我对如何正确地将其解析为数组感到有些困惑。

以下是一个例子：

<li><input type="checkbox" name="group[69][4096]" /> Thin</li>
<li><input type="checkbox" name="group[69][8192]" /> Oily</li>
<li><input type="checkbox" name="group[69][16384]" /> Dry</li>

第一级和第二级索引将定期更改，因此无法进行硬编码。如何创建二维javascript数组并将这些值放在相同的键下？

出于显而易见的原因，我不想使用eval()，我试着用正则表达式，但我担心这不是我的强项。我接近 - .+\[([0-9]+)\]\[([0-9]+)\]将匹配http://regexr.com/上的字符串 - 但由于某种原因它似乎不适用于js。至少，我无法让它返回被捕获的群体。

Answer 1

您可以通过使用此正则表达式/group\[(\d*?)\]\[(\d*?)\]/解析每个输入的名称来减少输入到二维数组中：

＆＃13;

const inputs = Array.from(document.querySelectorAll('[name^="group"]'));

const grid = inputs.reduce((grid, input) => {
  const [, y, x] = input.name.match(/group\[(\d*?)\]\[(\d*?)\]/);
  grid[y] = grid[y] || [];
  grid[y][x] = input.value;
  return grid;
}, []);

console.log(grid);

＆＃13;

<input name="group[0][0]" value="0,0"/>
<input name="group[0][1]" value="0,1"/>
<input name="group[0][2]" value="0,2"/>
<input name="group[0][3]" value="0,3"/>
<input name="group[0][4]" value="0,4"/>

<input name="group[1][0]" value="1,0"/>
<input name="group[1][1]" value="1,1"/>
<input name="group[1][2]" value="1,2"/>
<input name="group[1][3]" value="1,3"/>
<input name="group[1][4]" value="1,4"/>

<input name="group[2][0]" value="2,0"/>
<input name="group[2][1]" value="2,1"/>
<input name="group[2][2]" value="2,2"/>
<input name="group[2][3]" value="2,3"/>
<input name="group[2][4]" value="2,4"/>

＆＃13;

如何使用匹配的索引将二维复选框名称解析为JSON？

1 个答案: