如何使用jQuery和HTML读取CSV文件并实现条件校验与导出

以下是补全后的完整代码，包含CSV读取、关键词校验、ID分配和导出功能：

<div class="input-group">
  <input type="file" class="form-control" id="csv" aria-describedby="file" aria-label="Upload" accept=".csv">
  <button class="btn btn-outline-light btn-primary" type="button" id="upload">Upload</button>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
  // 自定义关键词与对应交易ID的映射，可按需修改
  const keywordIdMap = {
    "餐饮": "TRX-FOOD-001",
    "购物": "TRX-SHOP-002",
    "交通": "TRX-TRANS-003"
  };

  $("#upload").click(function(){
    const fileInput = $("#csv")[0];
    const file = fileInput.files[0];
    if(!file) {
      alert("请先选择CSV文件");
      return;
    }

    const reader = new FileReader();
    reader.onload = function(e) {
      const csvContent = e.target.result;
      // 解析CSV为二维数组（兼容带引号的字段）
      const rows = parseCSV(csvContent);
      if(rows.length === 0) {
        alert("CSV内容为空或格式错误");
        return;
      }

      // 处理每一行数据：添加匹配的交易ID
      const processedRows = rows.map((row, index) => {
        // 表头行添加新列名
        if(index === 0) {
          return [...row, "交易ID"];
        }
        // 遍历单元格查找匹配关键词
        let matchedId = "";
        for(const cell of row) {
          const lowerCell = cell.toLowerCase();
          for(const [keyword, id] of Object.entries(keywordIdMap)) {
            if(lowerCell.includes(keyword.toLowerCase())) {
              matchedId = id;
              break; // 找到第一个匹配项即停止
            }
          }
          if(matchedId) break;
        }
        return [...row, matchedId];
      });

      // 转换为CSV字符串并触发下载
      const processedCsv = convertToCSV(processedRows);
      downloadCSV(processedCsv, "处理后的交易记录.csv");
    };

    reader.readAsText(file, "UTF-8");
  });

  // CSV解析工具函数：处理带引号的字段
  function parseCSV(csv) {
    const lines = csv.split(/\r?\n/);
    const result = [];
    const regex = /("([^"]*)"|([^",\n]+))/g;

    for(const line of lines) {
      if(line.trim() === "") continue;
      const matches = [...line.matchAll(regex)];
      const row = matches.map(match => match[2] || match[3]);
      result.push(row);
    }
    return result;
  }

  // 二维数组转CSV字符串工具函数
  function convertToCSV(rows) {
    return rows.map(row => {
      return row.map(cell => {
        // 包含逗号/引号的字段用双引号包裹
        if(/[,"\n]/.test(cell)) {
          return `"${cell.replace(/"/g, '""')}"`;
        }
        return cell;
      }).join(",");
    }).join("\n");
  }

  // 触发CSV下载工具函数
  function downloadCSV(content, filename) {
    const blob = new Blob([content], { type: "text/csv;charset=utf-8;" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }
});
</script>

核心功能说明 #

1. 文件读取：通过FileReader读取本地CSV，指定UTF-8编码避免中文乱码，限制仅允许选择CSV文件
2. CSV解析/转换：两个工具函数处理CSV与二维数组的互转，兼容包含逗号或引号的特殊单元格
3. 关键词匹配：
   • 可通过keywordIdMap自由配置关键词和对应ID
   • 默认采用忽略大小写的包含匹配，若需严格完全匹配，可修改为lowerCell === keyword.toLowerCase()
   • 找到第一个匹配关键词后立即停止，避免重复匹配
4. 导出功能：生成处理后的CSV字符串，通过临时链接触发浏览器下载

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