文本域CSV转二维数组时循环多执行一次的问题排查

问题场景 #

将7行以|分隔的CSV数据粘贴到HTML的textarea组件后，调用getText函数转换为二维数组，过程中函数会触发undefined.split()的错误，虽数据能正确加载，但函数会因异常终止。

错误原因 #

1. 循环条件错误：外层for循环的终止条件写为allTextLines.length，这是一个非零数值（始终为真），导致循环无限执行，直到i超出数组下标范围，此时allTextLines[i]为undefined，调用split()就会报错。
2. 空行问题：textarea内容末尾如果有换行，拆分后会生成空字符串元素，同样会触发split()调用失败。

解决方案 #

方案1：修正循环逻辑

调整循环终止条件，并添加空行过滤，确保只处理有效数据行：

function getText() {
  // 获取textarea内容
  var csv = document.getElementById("myTextAreaBox").value;

  // 按所有换行符拆分文本
  let allTextLines = csv.split(/\r\n|\n|\r/);

  // 修正外层循环终止条件，遍历数组所有有效元素
  for (let i = 0; i < allTextLines.length; i++){
    // 跳过空行，避免处理undefined或空字符串
    if (!allTextLines[i]) continue;
    
    let row = allTextLines[i].split('|');
    let col = [];

    // 内层循环处理列数据
    for (let j = 0; j < row.length; j++){
      col.push(row[j]);
    }
    
    // 此处可添加对col的后续处理，比如存入二维数组
    console.log(col);
  }
}

方案2：用数组方法简化代码（更高效）

直接使用filter过滤空行，配合map拆分每行，一行代码生成目标二维数组：

function getText() {
  var csv = document.getElementById("myTextAreaBox").value;
  
  // 过滤空行并拆分每行，直接得到二维数组
  const csvArray = csv.split(/\r\n|\n|\r/)
    .filter(line => line.trim() !== '')
    .map(line => line.split('|'));
  
  console.log(csvArray);
}

配套HTML代码

<textarea id="myTextAreaBox" name="myTextAreaBox"></textarea> 
<input type="button" value="获取文本" onclick="getText()" />

测试数据 #

BHP.AX|20/07/2022|BUY|250|$9,324.87
BHP.AX|23/08/2022|BUY|230|$9,675.35
BHP.AX|01/09/2022|SELL|280|$10,520.22
BHP.AX|26/09/2022|SELL|100|$5,617.05
BHP.AX|23/06/2023|SELL|100|$5,445.55
BLD.AX|29/10/2018|BUY|100|$5,074.00
BLD.AX|08/11/2019|SELL|100|$6,049.00

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