在客户端用 JavaScript 逐行读取文件

您能帮我解决以下问题吗？

Goal

在客户端（通过 JS 和 HTML5 类在浏览器中）逐行读取文件，无需将整个文件加载到内存中。

Scenario

我正在开发应该在客户端解析文件的网页。目前，我正在阅读本文件中描述的文件article http://www.html5rocks.com/en/tutorials/file/dndfiles/.

HTML:

<input type="file" id="files" name="files[]" />

JavaScript：

$("#files").on('change', function(evt){
    // creating FileReader
    var reader = new FileReader();

    // assigning handler
    reader.onloadend = function(evt) {      
        lines = evt.target.result.split(/\r?\n/);

        lines.forEach(function (line) {
            parseLine(...);
        }); 
    };

    // getting File instance
    var file = evt.target.files[0];

    // start reading
    reader.readAsText(file);
}

问题是 FileReader 一次读取整个文件，这会导致大文件（大小 >= 300 MB）的选项卡崩溃。使用reader.onprogress并不能解决问题，因为它只是增加结果直到达到极限。

发明轮子

我在互联网上做了一些研究，但没有找到简单的方法来做到这一点（有很多文章描述了这个确切的功能，但在 Node.js 的服务器端）。

作为解决这个问题的唯一方法，我只看到以下内容：

1. 按块分割文件（通过File.split(startByte, endByte) method)
2. 查找该块中的最后一个换行符 ('/n')
3. 读取除最后一个换行符之后的部分之外的块，并将其转换为字符串并按行分割
4. 从步骤 2 中找到的最后一个换行符开始读取下一个块

但我会更好地使用已经存在的东西来避免熵增长。

最终我创建了新的逐行阅读器，它与以前的完全不同。

特点是：

• 基于索引的文件访问（顺序和随机）
• 针对重复随机读取进行了优化（为过去已经导航过的行保存了具有字节偏移量的里程碑），因此在读取所有文件一次后，访问第 43422145 行几乎与访问第 12 行一样快。
• 在文件中搜索：找下一个 and find all.
• 精确的索引、偏移量和匹配长度，以便您可以轻松突出显示它们

检查这个jsFiddle http://jsfiddle.net/3hmee6vb/1/举些例子。

Usage:

// Initialization
var file; // HTML5 File object
var navigator = new FileNavigator(file);

// Read some amount of lines (best performance for sequential file reading)
navigator.readSomeLines(startingFromIndex, function (err, index, lines, eof, progress) { ... });

// Read exact amount of lines
navigator.readLines(startingFromIndex, count, function (err, index, lines, eof, progress) { ... });

// Find first from index
navigator.find(pattern, startingFromIndex, function (err, index, match) { ... });

// Find all matching lines
navigator.findAll(new RegExp(pattern), indexToStartWith, limitOfMatches, function (err, index, limitHit, results) { ... });

性能与之前的解决方案相同。您可以在 jsFiddle 中调用“Read”来测量它。

GitHub: https://github.com/anpur/client-line-navigator/wiki https://github.com/anpur/client-line-navigator/wiki