如何将带数组式name的表单输入转换为嵌套JSON对象？

问题场景 #

现有一组带有结构化name属性的input元素：

<input type="text" name="attributes[options][0][label]" value="Test Option">
<input type="text" name="attributes[options][0][value]" value="test-option">
<input type="text" name="attributes[options][1][label]" value="Another Test Option">
<input type="text" name="attributes[options][1][value]" value="another-test-option">

需要把这些input的name和value映射成如下格式的JSON：

{
  "attributes": {
    "options": [
      {
        "label": "Test Option",
        "value": "test-option"
      },
      {
        "label": "Another Test Option",
        "value": "another-test-option"
      }
    ]
  }
}

解决方案 #

前端JavaScript实现 #

如果是在浏览器端处理这些DOM元素，可以通过解析name属性的结构来构建目标对象：

// 选中所有目标input（这里通过name前缀筛选，也可以用其他选择器）
const inputs = document.querySelectorAll('input[name^="attributes[options]"]');
const result = { attributes: { options: [] } };

inputs.forEach(input => {
  // 用正则匹配出索引和字段名
  const match = input.name.match(/attributes\[options\]\[(\d+)\]\[(\w+)\]/);
  if (match) {
    const idx = Number(match[1]);
    const key = match[2];
    // 如果当前索引的选项对象还没创建，先初始化
    if (!result.attributes.options[idx]) {
      result.attributes.options[idx] = {};
    }
    // 给对应字段赋值
    result.attributes.options[idx][key] = input.value;
  }
});

// 转成格式化的JSON字符串
const jsonOutput = JSON.stringify(result, null, 2);
console.log(jsonOutput);

这段代码的核心是用正则表达式拆解name属性里的层级结构，然后动态填充到结果对象中，最后用JSON.stringify输出格式化后的JSON。

后端PHP实现 #

如果是处理表单提交的后端逻辑，PHP会自动帮你解析这种数组式的name属性，直接就能拿到结构化的数组，转成JSON即可：

// 表单提交后，$_POST会自动解析成多维数组
$formData = $_POST['attributes'];
// 输出格式化的JSON
echo json_encode($formData, JSON_PRETTY_PRINT);

这是PHP原生支持的表单参数解析特性，非常省心，不需要额外处理字符串拆分。

内容的提问来源于stack exchange，提问作者Jeff