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

Question

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

HTML(例如):

<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/body-parser 的情况下完成我想做的事情？

---

解决方案:

感谢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]')为了选择具有以名称开头的名称属性的所有输入字段。用.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"/>