JavaScript下CSV字符串转JSON含逗号表头无法渲染data Table的解决

• 原参考代码使用单条正则硬匹配CSV内容，完全没有遵循通用CSV（RFC 4180）的解析规则，无法识别「被双引号包裹的字段内部出现逗号、转义引号」的场景——尤其是当表头字段本身带逗号时，正则会直接把引号内部的逗号当成字段分隔符，导致拆出来的表头列表错位，最终数据无法正常渲染。
• 原正则的惰性匹配逻辑存在硬伤：比如遇到"User Name, Age",Hobby 这种带逗号的表头，会将引号包裹的整段内容按逗号拆成两段，从根源上破坏表头结构。
• 原有实现完全未处理CSV标准的转义规则：CSV中两个连续"代表字段内部的一个普通双引号，原代码遇到这类内容时会出现引号残留、字段拆分错位的问题；附带的类型转换逻辑也存在缺陷，Number(值) || 值的写法会把0这类合法的数字值错误覆盖为原字符串。

放弃用单条正则硬匹配所有CSV场景的思路，采用逐字符状态机做解析，这是目前工业界处理CSV解析的最稳妥方案，完全兼容标准CSV格式，不管是字段内部带逗号、带转义引号、表头含特殊字符都能正确识别：

const csvToJson = (csvStr, customHeaders = null, delimiter = ',', quoteChar = '"') => {
  // 单行解析核心逻辑：通过状态标记区分是否在引号包裹的字段内
  const parseLineFields = (lineContent) => {
    const fields = [];
    let currentFieldContent = '';
    let isInsideQuote = false;

    for (let i = 0; i < lineContent.length; i++) {
      const currentChar = lineContent[i];
      // 处理引号逻辑：识别转义引号、字段边界
      if (currentChar === quoteChar) {
        // 连续两个引号代表字段内的普通引号
        if (isInsideQuote && lineContent[i + 1] === quoteChar) {
          currentFieldContent += quoteChar;
          i++;
        } else {
          isInsideQuote = !isInsideQuote;
        }
        continue;
      }
      // 仅当不在引号内部时，遇到的分隔符才是真正的字段边界
      if (currentChar === delimiter && !isInsideQuote) {
        fields.push(currentFieldContent.trim());
        currentFieldContent = '';
        continue;
      }
      currentFieldContent += currentChar;
    }
    // 存入最后一个字段
    fields.push(currentFieldContent.trim());
    return fields;
  }

  const validLines = csvStr.split('\n').filter(line => line.trim().length > 0);
  // 解析表头：优先用用户传入的自定义表头，否则从首行解析
  const headers = customHeaders || parseLineFields(validLines.shift());
  const jsonResult = [];

  for (const line of validLines) {
    const rowValues = parseLineFields(line);
    const rowObject = {};
    headers.forEach((headerName, index) => {
      const cellValue = rowValues[index] ?? null;
      // 修正原代码的类型转换逻辑：空值转null，合法数字转数字类型，其余保留原字符串
      rowObject[headerName] = cellValue === '' 
        ? null 
        : (!isNaN(Number(cellValue)) && cellValue !== '' ? Number(cellValue) : cellValue);
    });
    jsonResult.push(rowObject);
  }
  return jsonResult;
}

• 从根源解决表头/字段带逗号的解析问题：只有在引号包裹范围外的逗号才会被识别为字段分隔符，引号内部的逗号会被当成普通字符处理，不会造成拆分错位。
• 完整兼容CSV标准的转义规则：连续双引号、字段首尾带空白字符的场景都能正确解析。
• 修正原代码的类型转换bug：不会将0这类合法的falsy数值错误覆盖为字符串，空单元格会自动转为null。
• 完全兼容原代码支持的「传入自定义表头列表」的调用方式，无需调整原有业务代码的调用逻辑。

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