. Advertisement .
..3..
. Advertisement .
..4..
JavaScript is a good tool for people who want to manipulate numbers and records. However, it’s also one of the most challenging to master. That is why there are so many guides available on the Internet to help you through specific problems, but most of them are not fully accurate.
For this reason, we decided to prepare this guide on how to read file line by line in JavaScript.
Read File Line By Line In JavaScript With Plain JavaScript
This approach is, without any doubt, the easiest and most approachable solution. After all, it does not require any additional help from any module or library. You will be creating a small function that reads the local file as an HTML input.
As you can see, we first select the input field using the getElementById
method. It triggers our function each time there is some change, meaning a new file was selected.
Then, we start with the creation of a FileReader()
object. We set it up so that another function using progressEvent as a parameter will be called when its reader.onload component gets triggered. The final part is printing the file’s entire content using console.log.
This basic file reader can then get some upgrades, one of which is the capability to read line by line. All you need to do is make use of the split function to divide the content and utilize an array to store the result. Next, add in a for loop to go through the whole thing line by line.
Example:
The file is as follows:
Line 1
Line 2
Line 3
Line 5
Code:
<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){
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);
};
Output:
1 --> Line 1
2 --> Line 2
3 --> Line 3
4 -->
5 --> Line 5
Read File Line By Line In JavaScript With Node.js readline Module
As you can see, this method has a prerequisite requirement: having Node.js already installed. If you want to check whether or not you already have Node, just type node –v on your command prompt. We will be making use of Node’s readline module to have an easier time reading the content.
The very first thing to do is, of course, to import the modules. Remember to throw in the fs module to act as a readable stream, as it’s the only thing readline is compatible with. This module is as picky as the parseFloat() module.
Code snippet:
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);
});
Output:
Line 1
Line 2
Line 3
Line 5
Read File Line By Line In JavaScript With The line-reader Module
readline is not the only module that Node offers having the capability to read files line by line. There is also an open-source module with the name line-reader. Due to its nature, you need to perform some additional steps to install it by writing this command:
npm install line-reader –save
This module provides you with a method called eachLine()
, which reads any file you input line by line.
It will require you to provide one callback function which has two input arguments. One of them is called line, which will be storing the read content. The other one is last, which tells you if the line read is the file’s last line.
Code:
const lineReader = require('line-reader');
lineReader.eachLine('./demo.txt',(line,last)=>{
console.log(line);
})
Output:
Line 1
Line 2
Line 3
Line 5
Conclusion
With this article, we have shown you all there is to know about how to read file line by line in JavaScript. All the three approaches that we have put out are very good in specific situations. That is why you just need to understand in which situation a solution fits the most.
Leave a comment