创建一个具有属性的对象，以反映其输入字段名称并为其赋值

Question

我有一个带有controlled input fields的React应用程序，目前我在尝试从输入字段名称/路径构建对象并为其赋值时遇到了问题。

假设一个表单生成以下内容的输入：

<input
    type="text"
    name="field_5b55440b965b1[value][1][field_5b554428965b2]"
    placeholder=""
    value="foo"
>

它的名称是:值为foo的field_5b55440b965b1[value][1][field_5b554428965b2]

如何从这样的名称=>值对构建对象：

{
    field_5b55440b965b1: {
        value: [
            field_5b554428965b2: '',
            field_5b554428965b2: 'foo',
        ]
    }
}

目前，我的解决方案是使用qs包。我构建的对象是这样的：

$object = qs.parse(`${name}=${value}`, { arrayLimit: 0 });

它在大多数情况下都是成功的：https://runkit.com/embed/pm2ha1inhj3o

但是，如果值中包含& (与符号)，则它将失败：https://runkit.com/embed/qeczd27l5xr7

现在，我正在寻找其他可能的解决方案或包。这里有这样的包：

https://www.npmjs.com/package/set-value -但它只允许.(点)路径

https://www.npmjs.com/package/form-serialize -但是您需要表单的DOM，而不是单个输入字段。

希望有人能帮上忙。

致以敬意，

Answer 1

为什么不使用一些正则表达式从名称中提取所有级别，然后使用循环遍历列表以生成对象？

var levels = name.match(/regex/);
let $object = {}
let intermediate = $object
for(var i = 0; i < levels.length; i++) {
    intermediate[levels[i]] = (i === levels.length - 1) ? $value : {}
    intermediate = intermediate[levels[i]]
}

抱歉的正则表达式，我不够好，所以我更喜欢让您检查它。