如何从指定name格式的input字段生成目标结构的数组对象

需求说明 #

将页面中所有name属性格式为question[数字]的input字段，转换成包含question（问题编号）和answer（输入值）的数组对象。

原生JavaScript实现 #

直接通过浏览器原生API完成转换，无需依赖第三方库：

// 获取所有符合格式的input元素
const inputs = document.querySelectorAll('input[name^="question["]');
// 转换为目标数组结构
const question = Array.from(inputs).map(input => {
    // 提取name中的问题编号
    const qId = parseInt(input.name.match(/\d+/)[0], 10);
    return {
        question: qId,
        answer: input.value.trim()
    };
});

// 输出结果
console.log(question);

代码关键点：

• document.querySelectorAll('input[name^="question["]')：通过属性前缀选择器筛选出所有name以question[开头的input元素
• Array.from(inputs)：将DOM节点集合（NodeList）转换为数组，方便使用map方法遍历处理
• input.name.match(/\d+/)[0]：用正则表达式匹配name属性中的数字部分，提取问题编号
• input.value.trim()：去除输入值前后的空白字符，保证数据整洁

jQuery实现（若项目已引入jQuery） #

如果项目中已经使用jQuery，可以用更简洁的代码实现：

const question = $('input[name^="question["]').map(function() {
    const qId = parseInt($(this).attr('name').match(/\d+/)[0], 10);
    return {
        question: qId,
        answer: $(this).val().trim()
    };
}).get();

// 输出结果
console.log(question);

示例输出 #

针对你提供的input字段，运行代码后会生成如下数组：

const question = [
    { question: 1, answer: "Yes" },
    { question: 2, answer: "No" },
    { question: 3, answer: "Other" }
];

内容的提问来源于stack exchange，提问作者Sudhir Singh