CSV单元格含换行致网页导入显示异常，求前端解决方案

核心思路 #

CSV标准里，包含换行、分隔符的单元格会用双引号包裹。普通的split(',')或按换行拆分的方法会忽略这个规则，导致数据错位。解决关键是识别引号包裹的内容，把引号内的换行和分隔符当作单元格内容，而非行/列分隔符。

自定义解析函数（纯JS，无依赖） #

直接用前端JS实现符合CSV标准的解析逻辑，不用修改源文件：

function parseCSV(csvText) {
  const lines = [];
  let currentLine = [];
  let currentCell = '';
  let inQuotes = false;

  for (let i = 0; i < csvText.length; i++) {
    const char = csvText[i];

    // 切换引号状态，处理转义双引号（CSV用""表示单个"）
    if (char === '"') {
      inQuotes = !inQuotes;
      // 如果下一个字符也是"，说明是转义，加入单元格并跳过下一个
      if (i < csvText.length - 1 && csvText[i + 1] === '"') {
        currentCell += '"';
        i++; // 跳过下一个"
      }
      continue;
    }

    // 不在引号内时，换行=新行
    if (char === '\n' && !inQuotes) {
      currentLine.push(currentCell.trim());
      lines.push(currentLine);
      currentLine = [];
      currentCell = '';
      // 处理Windows格式的\r换行符
      if (csvText[i - 1] === '\r') {
        currentCell = currentCell.slice(0, -1);
      }
      continue;
    }

    // 不在引号内时，逗号=列分隔
    if (char === ',' && !inQuotes) {
      currentLine.push(currentCell.trim());
      currentCell = '';
      continue;
    }

    // 其他字符直接加入单元格
    currentCell += char;
  }

  // 处理最后一行数据
  currentLine.push(currentCell.trim());
  lines.push(currentLine);

  return lines;
}

使用示例（结合Bootstrap渲染表格） #

1. 读取CSV文件（通过FileReader）：

document.getElementById('csv-upload').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = function(event) {
    const csvContent = event.target.result;
    const parsedData = parseCSV(csvContent);
    renderBootstrapTable(parsedData);
  };
  reader.readAsText(file);
});

2. 渲染Bootstrap表格：

function renderBootstrapTable(data) {
  const tableContainer = document.getElementById('table-container');
  // 清空容器，生成带Bootstrap样式的表格
  tableContainer.innerHTML = `
    <table class="table table-striped table-hover">
      <thead></thead>
      <tbody></tbody>
    </table>
  `;
  const thead = tableContainer.querySelector('thead');
  const tbody = tableContainer.querySelector('tbody');

  // 渲染表头
  const headerRow = document.createElement('tr');
  data[0].forEach(header => {
    const th = document.createElement('th');
    th.textContent = header;
    headerRow.appendChild(th);
  });
  thead.appendChild(headerRow);

  // 渲染数据行，把单元格内的换行转成<br>方便网页显示
  for (let i = 1; i < data.length; i++) {
    const row = document.createElement('tr');
    data[i].forEach(cell => {
      const td = document.createElement('td');
      td.innerHTML = cell.replace(/\n/g, '<br>');
      row.appendChild(td);
    });
    tbody.appendChild(row);
  }
}

3. 适配原有搜索功能：
   解析后的数据是二维数组，搜索时直接遍历每个单元格内容即可：

function handleSearch(keyword) {
  const rows = document.querySelectorAll('#table-container tbody tr');
  rows.forEach(row => {
    const cells = row.querySelectorAll('td');
    let hasMatch = false;
    cells.forEach(cell => {
      if (cell.textContent.toLowerCase().includes(keyword.toLowerCase())) {
        hasMatch = true;
      }
    });
    row.style.display = hasMatch ? '' : 'none';
  });
}

// 绑定搜索框事件
document.getElementById('search-input').addEventListener('input', function(e) {
  handleSearch(e.target.value);
});

注意事项 #

• 如果你的CSV用单引号包裹单元格，把解析函数里的'"'改成"'"即可。
• 函数已兼容Windows格式的\r\n换行符，无需额外修改。

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