javascript - 通过从字段中删除引号、支持标题和允许其他分隔符来改进 csv 文件阅读器

Question

我希望我的文件在以 html 格式显示时没有引号。意思是每个词都有引号。我想把它拿走。而且我还想添加一个 th 标签，这样我就可以有一个标题。而且我不想只用逗号分隔，我还想要其他分隔符，例如 |

这是我的代码:

CSS:

表格 { 边框:1px 实心#ccc； } 表 { 背景色:#F7F7F7； 颜色:#333； 字体粗细:粗体； } 第 th 表，第 t 表 { 填充:5px； 边框颜色:#ccc；

Javascript:

$(function () {
            $("#upload").bind("click", function () {
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
                if (regex.test($("#fileUpload").val().toLowerCase())) {
                    if (typeof (FileReader) != "undefined") {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            var table = $("<table />");
                            var rows = e.target.result.split("\n");
                            for (var i = 0; i < rows.length; i++) {
                                var row = $("<tr />");
                                var cells = rows[i].split(",");
                                for (var j = 0; j < cells.length; j++) {
                                    var cell = $("<td />");
                                    cell.html(cells[j]);
                                    row.append(cell);
                                }
                                table.append(row);
                            }
                            $("#dvCSV").html('');
                            $("#dvCSV").append(table);
                        }
                        reader.readAsText($("#fileUpload")[0].files[0]);
                    } else {
                        alert("This browser does not support HTML5.");
                    }
                } else {
                    alert("Please upload a valid CSV file.");
                }
            });
        });

HTML:

<input type="file" id="fileUpload" />
    <input type="button" id="upload" value="Upload" />
    <hr />
    <div id="dvCSV">
    </div>

Answer 1

所以我查看了您的代码并从中制作了一个 jsfiddle。

Heres the full fiddle

$(function() {
  $("#upload").bind("click", function() {
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
    if (regex.test($("#fileUpload").val().toLowerCase())) {
      if (typeof(FileReader) != "undefined") {
        var reader = new FileReader(),
          table = $("<table>"),
          separator = ',',
          rows,
          rowLength;

        reader.onload = function(e) {
          rows = e.target.result.split(/[\r\n|\n]+/);
          rowLength = rows.length;

          for (var i = 0; i < rowLength; i++) {
            var row = $("<tr>"),
              cells = rows[i].split(separator),
              cellLength = cells.length,
              cell;

            for (var j = 0; j < cellLength; j++) {
              // Special case for the first row
              cell = (i === 0) ? $("<th>") : $("<td>");
              cell.html(cells[j]);
              row.append(cell);
            }

            // Special case for first row (thead)
            if (i === 0) {
              row = $('<thead>').html(row);
            }
            table.append(row);
          }
          $("#dvCSV").html('');
          $("#dvCSV").append(table);
        }
        reader.readAsText($("#fileUpload")[0].files[0]);
      } else {
        alert("This browser does not support HTML5.");
      }
    } else {
      alert("Please upload a valid CSV file.");
    }
  });
});

a {
  display: block;
}
table {
  border: 1px solid #ccc;
}
table th {
  background-color: #F7F7F7;
  color: #333;
  font-weight: bold;
}
table th,
table td {
  padding: 5px;
  border-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="http://samplecsvs.s3.amazonaws.com/SalesJan2009.csv">Dummy CSV</a>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
<hr />
<div id="dvCSV">
</div>

我对它做了一些微调。事实证明(至少从我使用的虚拟 csv 来看)，没有添加引号......

按行拆分的正则表达式似乎不起作用，所以我将其更改为:

var rows = e.target.result.split(/[\r\n|\n]+/);

在您想要添加thead 和th 支持的评论中。为此，我刚刚在两行中添加了一个条件:

cell = (i === 0) ? $("<th>") : $("<td>");
if (i === 0) {
    row = $('<thead>').html(row);
}

您提到想要用逗号以外的东西分隔。如您所知，您正在处理“Comma-Separated-Values”，因此需要用逗号分隔...但是为了使您的代码更通用，我在变量中添加了分隔符(因此您可以将其与您期望的分隔符交换):

var separator = ',';
var cells = rows[i].split(separator);

希望对您有所帮助! :)