JavaScript如何拆分HTML输入框内容并逐项存入空数组

你现有代码的问题是直接将输入框的完整字符串作为单个元素推入数组，只需要对输入值做分割、去空格处理后再批量加入数组即可，不需要修改原有HTML结构。

修改后的JavaScript代码 #

let myarray = []

function addTo() {
  const inputContent = document.getElementById("users").value.trim()
  // 输入为空时终止执行
  if (!inputContent) return
  // 按逗号拆分字符串，去除每个姓名前后的空格，过滤空内容
  const splitNames = inputContent.split(',').map(item => item.trim()).filter(Boolean)
  // 将拆分后的所有姓名批量加入数组
  myarray.push(...splitNames)
  // 可选：添加完成后清空输入框
  document.getElementById("users").value = ''
}

关键逻辑说明 #

• split(',')：将输入的完整字符串按逗号切分为数组片段，未处理空格时切分bill, bob, jim会得到['bill', ' bob', ' jim']
• .map(item => item.trim())：遍历每个切分后的片段，去除首尾多余空格，处理后得到标准的姓名片段['bill', 'bob', 'jim']
• .filter(Boolean)：自动过滤空值，兼容用户误输入多打逗号、首尾带逗号的场景，避免数组出现空元素
• push(...splitNames)：通过ES6展开运算符将拆分好的每个姓名作为独立元素推入原数组，不会产生嵌套数组的问题

修改完成后，输入bill, bob, jim点击按钮，得到的myarray结构就是你期望的['bill', 'bob', 'jim']，可直接通过索引访问对应姓名。

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