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

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*?)]/解析每个输入的名称来将输入减少到 2d 数组中：

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