在 JavaScript 中逐行读取文件

Ashok Chapagai 2023年10月12日
  1. 在 JavaScript 中使用普通 JavaScript 逐行读取本地文件
  2. 在 JavaScript 中使用 Node.js readline 模块读取本地文件
  3. 在 JavaScript 中使用 Node.js 中的 line-reader 模块读取本地文件
在 JavaScript 中逐行读取文件

本文将介绍使用 Vanilla JS 和 JavaScript 框架 Node.js 使用 JavaScript 读取文件的方法。

在 JavaScript 中使用普通 JavaScript 逐行读取本地文件

我们可以创建一个简单的 JavaScript 函数来读取作为 HTML 输入放入的本地文件。

我们可以使用 input HTML 标签来上传文件,并使用函数 FileReader() 从文件中逐行读取内容。

代码示例:

<input type="file" name="file" id="file" />
document.getElementById('file').onchange = function() {
  var file = this.files[0];
  var reader = new FileReader();
  reader.onload = function(progressEvent) {
    console.log(this.result);
  };
  reader.readAsText(file);
};

在这里,输入字段由 getElementById 方法选择,该方法将在更改时触发该函数(无论何时选择文件)。我们创建对象 FileReader() 的新实例。当实例 reader.onload 被触发时,一个带有参数 progressEvent 的函数被调用,我们可以在控制台上将文件的全部内容打印为 console.log(this.result)

我们可以扩展函数来逐行读取文件内容,如下图。

document.getElementById('file').onchange = function() {
  var file = this.files[0];
  var reader = new FileReader();
  reader.onload = function(progressEvent) {
    var fileContentArray = this.result.split(/\r\n|\n/);
    for (var line = 0; line < lines.length - 1; line++) {
      console.log(line + ' --> ' + lines[line]);
    }
  };
  reader.readAsText(file);
};

前一个方法的扩展片段使用 split() 来拆分 result 变量读取的内容并将其存储到数组 fileContentArray 变量中。然后使用 for 循环遍历 fileContentArray 变量的每一行并逐行打印文件内容。

出于测试目的,我们创建了一个 demo.txt 文件,其中包含以下内容。

Line 1
Line 2
Line 3

Line 5

现在,我们可以看到文件有五行,从 HTML Input 元素上传文件时,我们可以看到文件的内容,如下面的输出所示。

输出:

1 --> Line 1
2 --> Line 2
3 --> Line 3
4 --> 
5 --> Line 5

我们可以忽略内容 1 --> 因为它是为了可视化文件的行号。

在 JavaScript 中使用 Node.js readline 模块读取本地文件

我们应该确保我们已经安装了 Node 来使用这个方法。我们可以通过在终端或命令提示符中键入 node -v 来检查。我们现在可以使用 readline 模块轻松读取文件的内容。我们创建一个文件 app.js, 并在文件 app.js 的第一行,我们导入模块,如下所示。

const readline = require('readline');
const fs = require('fs');

由于 readline 模块内置在 Node.js 中,我们没有明确安装它。我们可以使用 fs 模块来创建可读流。这是因为 readline 模块仅与可读流兼容。

示例代码:

const readLine = require('readline');
const f = require('fs');
var file = './demo.txt';
var rl = readLine.createInterface(
    {input: f.createReadStream(file), output: process.stdout, terminal: false});
rl.on('line', function(text) {
  console.log(text);
});

我们可以将文件 app.js 保存到与文件 demo.txt 相同的文件夹中,然后使用命令 node app.js 运行。

输出:

Line 1
Line 2
Line 3

Line 5

在 JavaScript 中使用 Node.js 中的 line-reader 模块读取本地文件

我们可以使用 Node.js line-reader 模块在 JavaScript 中读取文件。该模块是开源的,我们需要使用 npm install line-reader --saveyarn add line-reader 命令来安装它。

使用 line-reader 模块读取文件内容很容易,因为它提供了 eachLine() 方法。它让我们一行一行地读取文件。我们可以在我们的文件 app.js 的顶部将它导入为 const lineReader = require('line-reader')

eachLine() 方法采用带有两个参数的回调函数。参数是 linelast。选项 line 存储内容,选项 last 告诉读取的行是否是文件中的最后一行。第二个选项代表一个布尔值。

示例代码:

const lineReader = require('line-reader');
lineReader.eachLine('./demo.txt', (line, last) => {
  console.log(line);
})

我们可以将文件 app.js 保存到文件 demo.txt 所在的文件夹,或者我们可以显式设置文件的路径,它将逐行读取文件的内容并将输出打印到控制台。

输出:

Line 1
Line 2
Line 3

Line 5
作者: Ashok Chapagai
Ashok Chapagai avatar Ashok Chapagai avatar

Ashok is an avid learner and senior software engineer with a keen interest in cyber security. He loves articulating his experience with words to wider audience.

LinkedIn GitHub

相关文章 - JavaScript File