如何解析input[]的值并将它们放入Javascript数组中

Question

假设我有这个：

<form id='foo'>
 <input name='bar[name]' />
 <input name='bar[age]' />
</form>

我该如何获取表单中名为foo的数组输入的值，并将它们放入一个类似这样的关联数组/对象中：

var result = {bar:{name:'blah',age:21}};

附言：我不想使用任何框架来完成这个。

- CodeOverload

---

“纯 JavaScript”是指“不使用其他人编写的JavaScript，例如jQuery或YUI团队编写的JavaScript”吗？（与“无Flash”或“无DOM”相对而言？） - Quentin

从技术上讲，jQuery 是“纯JavaScript”。你想了解如何使用普通的DOM读取表单元素，还是想更高效地完成任务？ - Matt Ball

querySelectorAll 也是纯函数吗？ - pimvdb

querySelectorAll和DOM一样不纯，它是浏览器向JS暴露的API，而不是JS本身的一部分。 - Quentin

Answer 1

我需要自己完成这个任务，在找到这个问题后，我不喜欢任何答案：我不喜欢正则表达式，其他方法也有限制。

你可以通过多种方式获得data变量。我将在实现时使用jQuery的serializeArray方法。

function parseInputs(data) {
    var ret = {};
retloop:
    for (var input in data) {
        var val = data[input];

        var parts = input.split('[');       
        var last = ret;

        for (var i in parts) {
            var part = parts[i];
            if (part.substr(-1) == ']') {
                part = part.substr(0, part.length - 1);
            }

            if (i == parts.length - 1) {
                last[part] = val;
                continue retloop;
            } else if (!last.hasOwnProperty(part)) {
                last[part] = {};
            }
            last = last[part];
        }
    }
    return ret;
}
var data = {
    "nom": "123",
    "items[install][item_id_4]": "4",
    "items[install][item_id_5]": "16",
    "items[options][takeover]": "yes"
};
var out = parseInputs(data);
console.log('\n***Moment of truth:\n');
console.log(out);

- smdvlpr

Answer 2

你可以像这样将元素映射到对象中。

function putIntoAssociativeArray() {

    var 
        form = document.getElementById("foo"),
        inputs = form.getElementsByTagName("input"),
        input,
        result = {};

    for (var idx = 0; idx < inputs.length; ++idx) {
        input = inputs[idx];
        if (input.type == "text") {
            result[input.name] = input.value;
        }
    }

    return result;
}

- Wyatt

Answer 3

var form = document.getElementById( 'foo' );
var inputs = form.getElementsByTagName( "input" );
var regex = /(.+?)\[(.+?)\]/;
var result = {};
for( var i = 0; i < inputs.length; ++i ) {
    var res = regex.exec( inputs[i].name );
    if( res !== null ) {
        if( typeof result[ res[1] ] == 'undefined' ) result[ res[1] ] = {};
        result[ res[1] ][ res[2] ] = inputs[i].value;
    }
}

- nobody

Answer 4

var inputs = document.getElementsByTagName('input');
var field_name, value, matches, result = {};
for (var i = 0; i < inputs.length; i++) {
   field_name = inputs[i].name;
   value = inputs[i].value;

   matches = field_name.match(/(.*?)\[(.*)\]/);

   if (!results[matches[0]]) {
       results[matches[0]] = {};
   }
   results[matches[0]][matches[1]] = value;
}

- Marc B

Answer 5

这将获取元素：

 var result = {};
    var elements = document.forms.foo.getElementsByTagName("input");
    for(var i = 0; i < elements.length; i++)
    {
       /* do whatever you need to do with each input */
    }

- scrappedcola

---

是的...但我们要如何获取名称属性的值。即bar[name]，bar[age]。 - Dimitris Papageorgiou

@DimitrisPapageorgiou 在 for 循环中你使用了 elments[i].name。 - scrappedcola

它不会形成嵌套的JSON，只会是一层深度。在嵌套形式结构的情况下，它将无法工作。 - Mo3z