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

Question

能否请您帮我解决以下问题。

目标

在客户端逐行读取文件(在浏览器中通过 JS 和 HTML5 类)，而不是将整个文件加载到内存中。

场景

我正在处理应该在客户端解析文件的网页。目前，我正在阅读此 article 中描述的文件.

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. 按 block 拆分文件(通过 File.split(startByte, endByte) 方法)
2. 在该 block 中找到最后一个换行符 ('/n')
3. 读取除最后一个换行符之后的部分之外的 block 并将其转换为字符串并按行拆分
4. 从第 2 步找到的最后一个换行符开始读取下一个 block

但我最好使用已经存在的东西来避免熵增。

Answer 1

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

特点是:

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

检查这个 jsFiddle例如。

用法:

// 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 中调用“读取”来测量它。

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