JavaScript如何解析带多层数组结构的表单input name属性值

1. name属性拆分实现 #

你之前的正则没有覆盖前缀提取和多段嵌套匹配，用下面的拆分函数可以完全符合你的输出要求：

function parseInputName(name) {
  const result = []
  // 提取最开头的根属性名
  const rootMatch = name.match(/^([^\[]+)/)
  if (!rootMatch) return result
  result.push(rootMatch[1])

  // 匹配所有中括号内的内容
  const bracketItems = name.matchAll(/\[([^\]]*)\]/g)
  for (const match of bracketItems) {
    const val = match[1]
    if (val === '') {
      // 空括号对应null
      result.push(null)
    } else if (/^\d+$/.test(val)) {
      // 纯数字下标转数字类型
      result.push(Number(val))
    } else {
      // 普通字符串属性直接保留
      result.push(val)
    }
  }
  return result
}

测试用例验证 #

parseInputName('student[0][name]') // ["student", 0, "name"]
parseInputName('student[]') // ["student", null]
parseInputName('student[0]') // ["student", 0]

2. 多层嵌套FormData转换实现 #

基于上面的拆分函数，可以直接实现支持任意层级嵌套的FormData转对象方法：

function formDataToObject(formData) {
  const root = {}
  // 遍历所有表单项
  for (const [fieldName, fieldValue] of formData.entries()) {
    const path = parseInputName(fieldName)
    let current = root
    // 逐层创建对象/数组结构
    for (let i = 0; i < path.length - 1; i++) {
      const key = path[i]
      const nextKey = path[i + 1]
      // 下一级是数字或空括号，当前层级创建数组，否则创建对象
      if (current[key] === undefined) {
        current[key] = (typeof nextKey === 'number' || nextKey === null) ? [] : {}
      }
      current = current[key]
    }
    // 赋值到最后一级
    const lastKey = path.at(-1)
    lastKey === null ? current.push(fieldValue) : current[lastKey] = fieldValue
  }
  return root
}

使用示例 #

如果你的表单包含以下字段：

<input name="student[0][name]" value="张三">
<input name="student[0][age]" value="18">
<input name="student[1][name]" value="李四">
<input name="hobby[]" value="篮球">
<input name="hobby[]" value="足球">
<input name="config[site][title]" value="测试站点">

调用方法即可得到完整的嵌套结构：

const form = document.querySelector('form')
const data = formDataToObject(new FormData(form))
/*
输出结果：
{
  student: [
    { name: '张三', age: '18' },
    { name: '李四' }
  ],
  hobby: ['篮球', '足球'],
  config: {
    site: { title: '测试站点' }
  }
}
*/

该方案支持任意层级的对象、数组嵌套，完全覆盖常见的表单数组场景。 #

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