Hướng dẫn javascript read file line by line - javascript đọc tệp từng dòng

Question

Tôi có một trang web được tạo bởi HTML+JavaScript là bản demo, tôi muốn biết cách đọc tệp CSV cục bộ và đọc từng dòng để tôi có thể trích xuất dữ liệu từ tệp CSV.

Nội dung chính Show

Sử dụng JavaScript đơn giản để đọc từng dòng tệp cục bộ trong JavaScript
Sử dụng mô -đun Node.js <input type="file" name="file" id="file"> <div id='output'> ... </div>3 để đọc tệp cục bộ trong JavaScript
Sử dụng mô -đun <input type="file" name="file" id="file"> <div id='output'> ... </div>4 trong Node.js để đọc tệp cục bộ trong JavaScript
Bài viết liên quan - Tệp JavaScript
JavaScript có đọc từng dòng không?
Làm cách nào để đọc một dòng tệp văn bản từng dòng trong nút js?
Làm cách nào để đọc dòng đầu tiên của một tệp trong Node JS?
Làm thế nào để bạn đọc một tệp trong javascript?

Hỏi ngày 28 tháng 4 năm 2014 lúc 2:22Apr 28, 2014 at 2:22

10

Không có jQuery:

const $output = document.getElementById('output')
document.getElementById('file').onchange = function() {
  var file = this.files[0];

  var reader = new FileReader();
  reader.onload = function(progressEvent) {
    // Entire file
    const text = this.result;
    $output.innerText = text

    // By lines
    var lines = text.split('\n');
    for (var line = 0; line < lines.length; line++) {
      console.log(lines[line]);
    }
  };
  reader.readAsText(file);
};

<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>

Hãy nhớ đặt mã JavaScript của bạn sau khi trường tệp được hiển thị.

Teocci

5,8621 Huy hiệu vàng42 Huy hiệu bạc42 Huy hiệu đồng1 gold badge42 silver badges42 bronze badges

Đã trả lời ngày 28 tháng 4 năm 2014 lúc 3:40Apr 28, 2014 at 3:40

SITESSITESsites

21K16 Huy hiệu vàng85 Huy hiệu bạc143 Huy hiệu Đồng16 gold badges85 silver badges143 bronze badges

9

Sử dụng ES6, JavaScript trở nên sạch hơn một chút

handleFiles(input) {

    const file = input.target.files[0];
    const reader = new FileReader();

    reader.onload = (event) => {
        const file = event.target.result;
        const allLines = file.split(/\r\n|\n/);
        // Reading line by line
        allLines.forEach((line) => {
            console.log(line);
        });
    };

    reader.onerror = (event) => {
        alert(event.target.error.name);
    };

    reader.readAsText(file);
}

Đã trả lời ngày 18 tháng 2 năm 2017 lúc 15:16Feb 18, 2017 at 15:16

JujodijujodiJuJoDi

14.2K23 Huy hiệu vàng77 Huy hiệu bạc126 Huy hiệu đồng23 gold badges77 silver badges126 bronze badges

6

Sử dụng JavaScript đơn giản để đọc từng dòng tệp cục bộ trong JavaScript
Sử dụng mô -đun Node.js
```
<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>
```
3 để đọc tệp cục bộ trong JavaScript
Sử dụng mô -đun
```
<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>
```
4 trong Node.js để đọc tệp cục bộ trong JavaScript

Bài viết này sẽ giới thiệu các cách để đọc qua tệp bằng cách sử dụng JavaScript bằng Vanilla JS và JavaScript Framework Node.js.

Sử dụng JavaScript đơn giản để đọc từng dòng tệp cục bộ trong JavaScript

Sử dụng mô -đun Node.js

<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>

3 để đọc tệp cục bộ trong JavaScript

Sử dụng mô -đun

<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>

4 trong Node.js để đọc tệp cục bộ trong JavaScript

Bài viết này sẽ giới thiệu các cách để đọc qua tệp bằng cách sử dụng JavaScript bằng Vanilla JS và JavaScript Framework Node.js.

<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);
};

Chúng ta có thể tạo một chức năng JavaScript đơn giản để đọc tệp cục bộ được đặt dưới dạng đầu vào HTML.

Chúng ta có thể sử dụng thẻ

<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>

5 HTML để tải lên tệp và chức năng

<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>

6 để đọc nội dung từ dòng tệp theo dòng với việc sử dụng chức năng

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);
};

Ví dụ về mã:

Ở đây, trường đầu vào được chọn bằng phương thức

<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>

7, sẽ kích hoạt hàm bất cứ khi nào nó được thay đổi (bất cứ khi nào một tệp được chọn). Chúng tôi tạo một thể hiện mới của đối tượng

<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>

6. Khi phiên bản

<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>

9 được kích hoạt, một hàm có tham số

handleFiles(input) {

    const file = input.target.files[0];
    const reader = new FileReader();

    reader.onload = (event) => {
        const file = event.target.result;
        const allLines = file.split(/\r\n|\n/);
        // Reading line by line
        allLines.forEach((line) => {
            console.log(line);
        });
    };

    reader.onerror = (event) => {
        alert(event.target.error.name);
    };

    reader.readAsText(file);
}

0 được gọi và chúng ta có thể in toàn bộ nội dung của tệp trên bảng điều khiển là

handleFiles(input) {

    const file = input.target.files[0];
    const reader = new FileReader();

    reader.onload = (event) => {
        const file = event.target.result;
        const allLines = file.split(/\r\n|\n/);
        // Reading line by line
        allLines.forEach((line) => {
            console.log(line);
        });
    };

    reader.onerror = (event) => {
        alert(event.target.error.name);
    };

    reader.readAsText(file);
}

1.

Line 1
Line 2
Line 3

Line 5

Chúng ta có thể mở rộng chức năng để đọc nội dung của dòng tệp theo từng dòng, như được hiển thị bên dưới.

Output:

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

Đoạn trích mở rộng từ phương thức trước sử dụng

handleFiles(input) {

    const file = input.target.files[0];
    const reader = new FileReader();

    reader.onload = (event) => {
        const file = event.target.result;
        const allLines = file.split(/\r\n|\n/);
        // Reading line by line
        allLines.forEach((line) => {
            console.log(line);
        });
    };

    reader.onerror = (event) => {
        alert(event.target.error.name);
    };

    reader.readAsText(file);
}

2 để phân chia nội dung được đọc bởi biến kết quả và lưu trữ nó thành biến

handleFiles(input) {

    const file = input.target.files[0];
    const reader = new FileReader();

    reader.onload = (event) => {
        const file = event.target.result;
        const allLines = file.split(/\r\n|\n/);
        // Reading line by line
        allLines.forEach((line) => {
            console.log(line);
        });
    };

    reader.onerror = (event) => {
        alert(event.target.error.name);
    };

    reader.readAsText(file);
}

3 mảng. Sau đó, vòng lặp

handleFiles(input) {

    const file = input.target.files[0];
    const reader = new FileReader();

    reader.onload = (event) => {
        const file = event.target.result;
        const allLines = file.split(/\r\n|\n/);
        // Reading line by line
        allLines.forEach((line) => {
            console.log(line);
        });
    };

    reader.onerror = (event) => {
        alert(event.target.error.name);
    };

    reader.readAsText(file);
}

4 được sử dụng để lặp qua từng dòng của biến

handleFiles(input) {

    const file = input.target.files[0];
    const reader = new FileReader();

    reader.onload = (event) => {
        const file = event.target.result;
        const allLines = file.split(/\r\n|\n/);
        // Reading line by line
        allLines.forEach((line) => {
            console.log(line);
        });
    };

    reader.onerror = (event) => {
        alert(event.target.error.name);
    };

    reader.readAsText(file);
}

3 và in từng dòng nội dung tệp.

Sử dụng mô -đun Node.js <input type="file" name="file" id="file"> <div id='output'> ... </div>3 để đọc tệp cục bộ trong JavaScript

Sử dụng mô -đun

<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>

4 trong Node.js để đọc tệp cục bộ trong JavaScript

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

Bài viết này sẽ giới thiệu các cách để đọc qua tệp bằng cách sử dụng JavaScript bằng Vanilla JS và JavaScript Framework Node.js.

Chúng ta có thể tạo một chức năng JavaScript đơn giản để đọc tệp cục bộ được đặt dưới dạng đầu vào HTML.

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);
});

Chúng ta có thể sử dụng thẻ

<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>

5 HTML để tải lên tệp và chức năng

<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>

6 để đọc nội dung từ dòng tệp theo dòng với việc sử dụng chức năng

Output:

Line 1
Line 2
Line 3

Line 5

Sử dụng mô -đun <input type="file" name="file" id="file"> <div id='output'> ... </div>4 trong Node.js để đọc tệp cục bộ trong JavaScript

Bài viết này sẽ giới thiệu các cách để đọc qua tệp bằng cách sử dụng JavaScript bằng Vanilla JS và JavaScript Framework Node.js.

Chúng ta có thể tạo một chức năng JavaScript đơn giản để đọc tệp cục bộ được đặt dưới dạng đầu vào HTML.

Chúng ta có thể sử dụng thẻ

<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>

5 HTML để tải lên tệp và chức năng

<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>

6 để đọc nội dung từ dòng tệp theo dòng với việc sử dụng chức năng

Mã ví dụ:

<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>

1

Chúng ta có thể lưu tệp

<input type="file" name="file" id="file" />

2 vào thư mục nơi đặt tệp

handleFiles(input) {

    const file = input.target.files[0];
    const reader = new FileReader();

    reader.onload = (event) => {
        const file = event.target.result;
        const allLines = file.split(/\r\n|\n/);
        // Reading line by line
        allLines.forEach((line) => {
            console.log(line);
        });
    };

    reader.onerror = (event) => {
        alert(event.target.error.name);
    };

    reader.readAsText(file);
}

6 hoặc chúng ta có thể đặt đường dẫn đến tệp một cách rõ ràng, sẽ đọc nội dung của dòng tệp bằng đường dòng in đầu ra vào bảng điều khiển.

Output:

Line 1
Line 2
Line 3

Line 5

Bài viết liên quan - Tệp JavaScript

Tạo và chạy tệp JavaScript trong Chrome

Viết dữ liệu vào một tệp trong JavaScript

Tệp bản đồ JavaScript

Khởi tạo một đối tượng tệp trong javascript

JavaScript có đọc từng dòng không?

Mã nguồn JS không bao giờ là "đọc" từng dòng. Mã nguồn JS thực sự được biên dịch (theo nghĩa thực sự của từ) trong các trình duyệt hiện đại. Động cơ biên dịch mã trong nhiều lần vượt qua. Hành vi là ví dụ của bạn là sản phẩm phụ của các quy tắc của ngôn ngữ JavaScript, chứ không phải cách nó được biên dịch hoặc giải thích.. JS source code is actually compiled (in the true sense of the word) in modern browsers. Engines compile code in multiple passes. The behavior is your example is a byproduct of the rules of the JavaScript language, not how it is compiled or interpreted.

Làm cách nào để đọc một dòng tệp văn bản từng dòng trong nút js?

Phương pháp 1: Sử dụng mô -đun Readline: Readline là mô -đun gốc của nút.JS, nó được phát triển cụ thể để đọc dòng nội dung từng dòng từ bất kỳ luồng có thể đọc nào.Nó có thể được sử dụng để đọc dữ liệu từ dòng lệnh.const readline = yêu cầu ('readline');Using the Readline Module: Readline is a native module of Node. js, it was developed specifically for reading the content line by line from any readable stream. It can be used to read data from the command line. const readline = require('readline');

Làm cách nào để đọc dòng đầu tiên của một tệp trong Node JS?

Trong tất cả các phiên bản hiện tại của nút.JS, readline.CreateInterface có thể được sử dụng như một điều không thể tin được, để đọc một dòng theo từng dòng - hoặc chỉ cho dòng đầu tiên.Điều này cũng an toàn để sử dụng với các tệp trống.readline. createInterface can be used as an async iterable, to read a file line by line - or just for the first line. This is also safe to use with empty files.

Làm thế nào để bạn đọc một tệp trong javascript?

Để đọc một tệp, hãy sử dụng Filereader, cho phép bạn đọc nội dung của một đối tượng tệp vào bộ nhớ.Bạn có thể hướng dẫn Filereader đọc một tệp dưới dạng bộ đệm mảng, URL dữ liệu hoặc văn bản.// Kiểm tra xem tệp là một hình ảnh.use FileReader , which enables you to read the content of a File object into memory. You can instruct FileReader to read a file as an array buffer, a data URL, or text. // Check if the file is an image.

programming javascript