如何将二维复选框名称解析为具有匹配索引的 JSON？答案

【问题标题】：How to parse two-dimensional checkbox name into JSON with matching indices?如何将二维复选框名称解析为具有匹配索引的 JSON？
【发布时间】：2017-08-12 01:01:05
【问题描述】：

我们的一个客户网站有一个表单，我们通过 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 中不起作用。至少，我无法让它返回捕获的组。

【问题讨论】：

标签： javascript json regex forms

【解决方案1】：

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

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

<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"/>

【讨论】：