JavaScript でファイルを 1 行ずつ読む
- JavaScript でプレーン JavaScript を使用してローカルファイルを 1 行ずつ読み取る
-
JavaScript で Node.js
readline
モジュールを使用してローカルファイルを読み取る -
JavaScript で Node.js の
line-reader
モジュールを使用してローカルファイルを読み取る
この記事では、VanillaJS と JavaScript フレームワーク Node.js を使用して JavaScript を使用してファイルを読み取る方法を紹介します。
JavaScript でプレーン JavaScript を使用してローカルファイルを 1 行ずつ読み取る
HTML 入力として入力されたローカルファイルを読み取るための簡単な JavaScript 関数を作成できます。
input
HTML タグを使用してファイルをアップロードし、関数 FileReader()
を使用して、関数を使用してファイルからコンテンツを 1 行ずつ読み取ることができます。
コード例:
<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)
としてコンソールに出力できます。
以下に示すように、関数を拡張してファイルの内容を 1 行ずつ読み取ることができます。
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()
を使用して、結果変数によって読み取られたコンテンツを分割し、配列 fileContentArray
変数に格納します。次に、for
ループを使用して、fileContentArray
変数の各行をループし、ファイルの内容を 1 行ずつ出力します。
テストの目的で、次のコンテンツを含む demo.txt
ファイルを作成します。
Line 1
Line 2
Line 3
Line 5
これで、ファイルに 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 --save
または yarn add line-reader
を使用してインストールする必要があります。
line-reader
モジュールを使用してファイルの内容を読み取るのは、eachLine()
メソッドを提供するため簡単です。これにより、ファイルを 1 行ずつ読み取ることができます。ファイル app.js
の先頭に const lineReader = require('line-reader')
としてインポートできます。
eachLine()
メソッドは、2つの引数を持つコールバック関数を取ります。引数は line
と last
です。オプション line
はコンテンツを保存し、オプション last
は読み取られた行がファイルの最後の行であるかどうかを示します。2 番目のオプションは、ブール値を表します。
コード例:
const lineReader = require('line-reader');
lineReader.eachLine('./demo.txt', (line, last) => {
console.log(line);
})
ファイル app.js
をファイル demo.txt
が配置されているフォルダーに保存するか、ファイルへのパスを明示的に設定することができます。これにより、ファイルの内容が 1 行ずつ読み取られて出力が出力されます。コンソール。
出力:
Line 1
Line 2
Line 3
Line 5