何如使用JavaScript解析CSV文件

csv（逗号分隔值）文件格式是一种在应用程序之间交换数据的流行方式。在这个快速提示中，我们将了解 javascript 如何帮助我们可视化 CSV 文件的数据。

创建 CSV 文件

首先，让我们创建一个简单的 CSV 文件。为此，我们将利用在线测试数据生成器Mockaroo 。这是我们的文件：

将 CSV 文件转换为 html 表格

现在我们已经生成了文件，我们准备解析它并构建一个关联的 HTML 表。

作为第一步，我们将使用jquery的ajax函数从该文件中检索数据：

	  $.ajax({
        url: 'csv_data.csv',
        dataType: 'text',
      }).done(successFunction);

假设AJAX请求成功，successFunction则执行。该函数负责解析返回的数据并将其转换为 HTML 表格：

	  function successFunction(data) {
        var allRows = data.split(/\r?\n|\r/);
        var table = '<table>';
        for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
          if (singleRow === 0) {
            table += '<thead>';
            table += '<tr>';
          } else {
            table += '<tr>';
          }
          var rowCells = allRows[singleRow].split(',');
          for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
            if (singleRow === 0) {
              table += '<th>';
              table += rowCells[rowCell];
              table += '</th>';
            } else {
              table += '<td>';
              table += rowCells[rowCell];
              table += '</td>';
            }
          }
          if (singleRow === 0) {
            table += '</tr>';
            table += '</thead>';
            table += '<tbody>';
          } else {
            table += '</tr>';
          }
        } 
        table += '</tbody>';
        table += '</table>';
        $('body').append(table);
      }

想法是将每个 CSV 行转换为表格行。考虑到这一点，让我们简要解释一下上面的代码是如何工作的：

• 首先，我们使用正则表达式来拆分 AJAX 响应，从而分隔 CSV 行。

• 然后，我们遍历 CSV 行并拆分它们的数据字段。

• 最后，我们遍历数据字段并创建相应的表格单元格。

此外，为了更好地理解此代码，请考虑以下可视化：

在这一点上，重要的是要澄清为什么我们使用/\r?\n|\r/正则表达式来拆分 CSV 行。

您可能已经知道，跨操作系统有不同的换行符表示。例如，在 Windows 平台上，代表换行符的字符是\r\n. 也就是说，通过使用上面的正则表达式，我们能够匹配所有可能的表示。

此外，大多数文本编辑器允许我们选择换行符的格式。以Notepad++为例。在此编辑器中，我们可以通过导航到此路径来指定所需的文档格式：

为了说明这一点，请考虑我们的文件。根据我们选择的格式，它看起来像这样：

向 HTML 表格添加样式

在查看生成的表格之前，让我们为其添加一些基本样式：

	  table {
        margin: 0 auto;
        text-align: center;
        border-collapse: collapse;
        border: 1px solid #d4d4d4;
      }
    
      tr:nth-child(even) {
        background: #d4d4d4;
      }
    
      th, td {
        padding: 10px 30px;
      }
    
      th {
        border-bottom: 1px solid #d4d4d4;
      }

这是生成的表：

如何使用 Papa Parse 库解析 CSV 文件

在本节中，我们将了解如何使用Papa Parse 库在眨眼间解析 CSV 文件！Papa Parse 是一个非常强大的 CSV 解析器，它为您提供了很多配置选项，您也可以将它用于非常大的 CSV 文件。

Papa Parse 库在 npm 上可用，如果您不想使用 npm，可以从 unpkg 下载官方 Papa Parse npm 包。

这个怎么运作

以下示例演示了解析 CSV 字符串是多么容易。

var results = Papa.parse(data); // data is a CSV string

该results变量包含以下内容。

如您所见，Results.data包含所有行的数组。如果在解析过程中出现任何错误，它们将在Results.errors. 最后，您可以使用Results.metaCSV 字符串访问元信息。

另一方面，如果你想直接解析一个本地的 CSV 文件，你可以传递一个JavaScript File 对象：

Papa.parse(fileInput.files[0], {
    complete: function(results) {
        console.log(results);
    }
});

您还可以将 URL 传递给远程 CSV 文件：

Papa.parse(url, {
    download: true,
    complete: function(results) {
        console.log(results);
    }
});

除了基本解析之外，Papa Parse 还提供了许多其他功能，例如：

• 流式传输大文件（因此您可以逐行处理它们）

• 反向解析（从 javaScript 对象发出 CSV）

• jQuery 集成

• 和更多

我鼓励您探索这个库，因为它非常强大且易于使用！

结论

在这篇简短的文章中，我们完成了将 CSV 文件转换为 HTML 表格的过程。当然，我们可以使用基于 Web 的工具进行这种转换，但我认为通过编写自己的代码来实现这一点总是更具挑战性。