使用 HTML 输入'name'属性生成对象

Question

在使用body-parser的ExpressJS中，存在将一组具有相同名称属性和已定义键的输入元素解析为JavaScript对象(或JSON，我不完全确定)的功能。

网页(例如)：

<input type="text" class="name" name="name[foo]" placeholder="input1"/>
<input type="text" class="name" name="name[bar]" placeholder="input2"/>

JavaScript(例如)：

var obj = req.body.name;

对象obj被 JavaScript 理解为{ "foo" : input1, "bar" : input2 }

我正在尝试使用标准jQuery获得类似的功能来处理几个相关的表单输入。 到目前为止，我所尝试的 - 无济于事 - 如下：

$(".name")生成一个包含文字 HTML 的对象(对获取键值对没有帮助)。

$(".name").map(function () {return $(this).val();}).get();生成一个值数组，但不生成键。

$("input[name='name']")和$("input[name='name[]']")什么也没产生。

我还尝试了以下方法将输入转换为数组，但它仍然无法达到将表单中的信息作为 JavaScript 对象/JSON 提取的目的：

$.fn.inputsToArray = function () {
var values= [];
$.each(this, function (i, field) {
values.push(field.value);
});
return values;
};

有没有办法在没有NodeJS/身体解析器的情况下完成我正在尝试做的事情？

---

溶液：

感谢gaetanoM的出色解决方案(下面接受)，我能够创建一个可以在任何jQuery对象上调用的通用jQuery函数(显然，只有当元素是<input ... name="example[key]" ... />格式时，它才能正常工作，但我跑题了)。

该函数被调用如下：

var output = $(":input[name^=example]").inputsToObject();

该函数定义如下：

$.fn.inputsToObject = function () {
var values = {};
values = $(this).get().reduce(function (acc, ele) {
var key = ele.name.match(/[(.*)]$/)[1];
acc[key] = $(ele).val();
return acc;
}, {})
return values;
}

Answer 1

对于第一个，您需要 $('：input[name^=name]') 才能选择所有具有 name 属性以 name 开头的输入字段。使用 .get()，您可以将 jQuery 结果转换为一个数组，您可以在该数组上应用 .reduce()：

var result = $(':input[name^=name]').get().reduce(function(acc, ele) {
var key = ele.name.match(/[(.*)]$/)[1];  // get the key
acc[key] = ele.getAttribute('placeholder'); // add to retval
return acc;
}, {});
console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="name" name="name[foo]" placeholder="input1"/>
<input type="text" class="name" name="name[bar]" placeholder="input2"/>