Làm cách nào để đọc tệp văn bản trong HTML bằng JavaScript?

Thông thường, chúng tôi cần có khả năng đọc và tải tệp lên trang web và ứng dụng web của mình. Có rất nhiều plugin và thư viện giúp bạn làm điều đó. Nhưng đôi khi bạn có thể chỉ muốn đọc tệp văn bản cục bộ trong trình duyệt web bằng JavaScript và xử lý dữ liệu của nó hoặc chỉ hiển thị nội dung của nó trên trang web. Trong bài viết này, chúng ta sẽ tìm hiểu làm thế nào để làm điều này

Cách đọc tệp văn bản cục bộ trong trình duyệt bằng JavaScript

Dưới đây là các bước để đọc tệp văn bản cục bộ trong trình duyệt bằng JavaScript. Thêm phần này vào trang HTML của bạn

Hãy để chúng tôi nhìn vào đoạn mã trên một cách chi tiết. Đầu tiên chúng ta tạo một XMLHTTPRequest. Sau đó, chúng tôi gọi hàm open() để tải tệp cục bộ. Chúng tôi kiểm tra xem mã trạng thái của nó có phải là 0 hay không và nếu đúng như vậy, chúng tôi sẽ lưu nội dung tệp trong biến allText

Bạn có thể gọi chức năng trên như hình dưới đây. Điều quan trọng là sử dụng tệp. // tiền tố khi chỉ định đường dẫn tệp

readTextFile("file:///C:/your/path/to/file.txt");

Nhưng xin lưu ý, đoạn mã trên cần được thêm vào tệp HTML cục bộ được mở trong trình duyệt web cục bộ. Nó sẽ không hoạt động nếu bạn tải nó lên máy chủ web và truy cập nó qua URL HTTP/HTTPS. Điều này là do các trình duyệt hiện đại không cho phép yêu cầu nguồn gốc chéo, tức là từ HTTP. // nộp. //. Vì vậy, chỉ khi bạn thêm nó vào tệp HTML và mở cục bộ trong trình duyệt web, trang web của bạn sẽ mở bằng tệp. // trong URL của trình duyệt và yêu cầu được gửi tới tệp. ///C. /của bạn/đường dẫn/đến/tệp. txt có cùng nguồn gốc

Trong bài viết này, chúng ta đã học cách đọc tệp văn bản cục bộ bằng JavaScript. Nhưng xin lưu ý, JS không thể tự đọc một tệp. Người dùng cần chuyển tệp qua tải lên hoặc một số chức năng khác

Có thể thực hiện thao tác đọc ghi trong tệp bằng một số câu lệnh. Nhưng mô-đun cần thiết để thực hiện các thao tác này phải được nhập. Mô-đun bắt buộc là 'fs' được gọi là mô-đun Hệ thống tệp trong JavaScript

Thao tác ghi trên tệp

Sau khi tệp Hệ thống tệp được nhập, thao tác writeFile() được gọi. Phương thức writeFile() được sử dụng để ghi vào tệp trong JavaScript. Cú pháp của phương thức này như sau -

writeFile(path,inputData,callBackFunction)

Hàm writeFile() chấp nhận ba tham số -

• Đường dẫn - Tham số đầu tiên là đường dẫn của tệp hoặc tên của tệp mà dữ liệu đầu vào sẽ được ghi vào

  Nếu đã có một tệp, thì nội dung trong tệp sẽ bị xóa và đầu vào do người dùng cung cấp sẽ được cập nhật hoặc nếu tệp không có, thì tệp có tệp đó sẽ được tạo trong đường dẫn đã cho và đầu vào

• inputData - Tham số thứ hai là dữ liệu đầu vào chứa dữ liệu được ghi trong tệp được mở

• callBackFuntion − Tham số thứ ba là hàm gọi lại hàm lấy lỗi làm tham số và hiển thị lỗi nếu thao tác ghi không thành công

ví dụ 1

Sau đây là một ví dụ về thao tác ghi vào tệp trong JavaScript

const fs = require('fs')
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile('tp.txt', fInput, (err) => {
   if (err) throw err;
   else{
      console.log("The file is updated with the given data")
   }
})

Nếu bạn mở tệp đầu vào, bạn có thể quan sát dữ liệu được viết trong đó như hình bên dưới -

Đọc từ tập tin

Sau khi mô-đun Hệ thống tệp được nhập, việc đọc tệp trong JavaScript có thể được thực hiện bằng cách sử dụng hàm readFile()

cú pháp

Cú pháp để đọc từ một tệp như sau -

readFile(path, format, callBackFunc)

Hàm readFile() chấp nhận ba tham số trong đó có một tham số tùy chọn

• Đường dẫn - Tham số đầu tiên là đường dẫn của tệp thử nghiệm mà từ đó nội dung sẽ được đọc. Nếu vị trí hoặc thư mục hiện tại là cùng thư mục chứa tệp sẽ được mở và đọc thì chỉ cần cung cấp tên tệp

• Định dạng - Tham số thứ hai là tham số tùy chọn là định dạng của tệp văn bản. Định dạng có thể là ASCII, utf-8, v.v.

• CallBackFunc − Tham số thứ ba là chức năng gọi lại lấy lỗi làm tham số và hiển thị lỗi được nêu ra do lỗi

ví dụ 2

Ví dụ sau cố gắng đọc nội dung của tệp được điền trong ví dụ trước và in nó -

const fs = require('fs')
fs.readFile('tp.txt', (err, inputD) => {
   if (err) throw err;
      console.log(inputD.toString());
})

đầu ra

Sau đây là đầu ra của ví dụ trên -

You are reading the content from Tutorials Point

Văn bản được hiển thị trong bảng điều khiển là văn bản trong tệp đã cho

ví dụ 3

Sau đây là một ví dụ kết hợp về cách đọc và ghi tệp ở trên bằng cách sử dụng mô-đun fs trên nút. js. Hãy để chúng tôi tạo một tệp JS có tên chính. js có đoạn mã sau -

Làm cách nào để đọc văn bản từ tệp văn bản bằng JavaScript?

Làm cách nào để đọc dữ liệu từ tệp HTML trong JavaScript?

Làm cách nào để mở tệp văn bản trong js?

Làm cách nào để đọc và ghi tệp văn bản trong JavaScript?