Làm cách nào để kiểm tra định dạng tệp CSV trong JavaScript?

Trình phân tích cú pháp xác thực JS CSV này dựa trên csv-parse và csv-sniffer. Nó có tính năng truyền dữ liệu, theo dõi lỗi và tự động nhận dạng dấu phân cách và dấu ngoặc kép CSV

csv-validate cung cấp cả mô-đun NodeJS (NPM), giao diện người dùng bảng điều khiển tùy chọn (CLI) và giao diện người dùng trình duyệt/Web để xác thực cục bộ các tệp CSV

\author Artem Lutov
\affiliation Zazuko GmbH, Lutov Analytics

$ npx csv-validate -h
Usage: csv-validate [options] <filename>

Options:
  -r, --relax-column-count   relax column count instead of emitting an error
  -s, --skip-error-lines     skip lines with errors instead of emitting an
                             error
  -d, --delimiter <symbol>   enforce specified CSV delimiter instead of
                             inferring it
  -q, --quotes <l-r-quotes>  left [and right if distinct] quote symbols instead
                             of inferring them (default: "")
  -n, --new-line <string>    enforce specified CSV new line (e.g., \r\n)
                             instead of inferring it
  -e, --encoding <string>    file encoding (default: "utf8")
  -h, --help                 display help for command

Giao diện người dùng web

Gói giao diện người dùng web nằm trong

$ npx csv-validate -h
Usage: csv-validate [options] <filename>

Options:
  -r, --relax-column-count   relax column count instead of emitting an error
  -s, --skip-error-lines     skip lines with errors instead of emitting an
                             error
  -d, --delimiter <symbol>   enforce specified CSV delimiter instead of
                             inferring it
  -q, --quotes <l-r-quotes>  left [and right if distinct] quote symbols instead
                             of inferring them (default: "")
  -n, --new-line <string>    enforce specified CSV new line (e.g., \r\n)
                             instead of inferring it
  -e, --encoding <string>    file encoding (default: "utf8")
  -h, --help                 display help for command

$ npx csv-validate -h
Usage: csv-validate [options] <filename>

Options:
  -r, --relax-column-count   relax column count instead of emitting an error
  -s, --skip-error-lines     skip lines with errors instead of emitting an
                             error
  -d, --delimiter <symbol>   enforce specified CSV delimiter instead of
                             inferring it
  -q, --quotes <l-r-quotes>  left [and right if distinct] quote symbols instead
                             of inferring them (default: "")
  -n, --new-line <string>    enforce specified CSV new line (e.g., \r\n)
                             instead of inferring it
  -e, --encoding <string>    file encoding (default: "utf8")
  -h, --help                 display help for command

Trên giao diện người dùng của bạn, bạn cho phép người dùng tải lên CSV. Vì một số lý do, họ sử dụng mã hóa khác với UTF-8 cổ điển. Hầu hết thời gian là do họ lưu CSV của mình bằng Microsoft Excel, được mã hóa bằng ISO-8859-1 hoặc windows-1252. Ở đây, tôi trình bày những gì tôi nghĩ ra, với một danh sách các tài liệu tham khảo hữu ích cho người đào

Chết tiệt. Người dùng của tôi nói với tôi rằng họ gặp phải một số lỗi lạ khi tải tệp CSV lên ứng dụng web của tôi. Từ Nestlé biến thành Nestl� và chữ nào cũng giống chữ “lạ”… Hiểu lạ là tiếng Anh không bản ngữ. đó là một vấn đề cổ điển về mã hóa. Nhiều blog sẽ cho bạn biết cách chuyển đổi mã hóa, sử dụng iconv-lite, nhưng một số blog sẽ giải thích cách tự động phát hiện mã hóa, sau đó chuyển đổi mã hóa đó và tất cả diễn ra ở giao diện người dùng

Khi tôi bắt đầu tìm kiếm câu trả lời, không có câu trả lời nào thỏa mãn cho trường hợp của tôi, và đó là lý do tôi viết blogpost này. bash và python có một số giải pháp, nhưng chúng là ngôn ngữ phụ trợ. Đây là danh sách các cụm từ Tìm kiếm mà tôi phải gõ trên google để vượt qua cơn ác mộng này

jschardet alternative  
detect encoding from arraybuffer  
File detect encoding js   
File detect encoding csv    
File detect encoding  
jquery upload csv  
jquery how detect encoding csv  
jquery csv encoding detect on select  
upload csv encoding   
how tell encoding from file js  
jquery get encoding csv  
papaparse encoding    
js jquery detect file type encoding character  
js jquery detect file type encoding  
js jquery detect file type  
detect-character-encoding npm   
detect encoding of string js  
determine csv encoding js  
determine csv type js  
determine file type js  
file type equivalent js  

Bây giờ tôi sẽ đi thẳng vào vấn đề

Mã HTML để tải lên CSV trông giống như vậy

  

      Upload your CSV
  
  

    
    Submit
  

cái nào hiển thị (tùy thuộc vào CSS của bạn)

Bước 1. Phát hiện mã hóa khi chúng tôi nhấp vào Chọn tệp

Việc phát hiện này có hai giai đoạn quan trọng

Mở tệp

Sử dụng FileReader, chúng ta phải sử dụng hàm readAsBinaryString(), nếu không, việc phân tích cú pháp readAsText() mặc định sẽ làm hỏng quá trình phát hiện

Phát hiện mã hóa

Chúng ta sẽ sử dụng thư viện jschardet (phiên bản js của Chardet. Universal Character Encoding Detector) để phát hiện mã hóa

Làm thế nào để thực hiện nó

Chúng tôi sử dụng jQuery để lắng nghe các sự kiện trên phần tử đầu vào

var jschardet = require("jschardet")  

$( "input[type=file]" ).on( "change", function() {
    var file = $(this)[0].files[0];
    reader = new FileReader();
    reader.onload = function(e){
        let csvResult = e.target.result.split(/\r|\n|\r\n/);
        $(this).attr('encoding', jschardet.detect(csvResult.toString()).encoding);
    }
    reader.readAsBinaryString(file);
});

Chúng ta sẽ dùng thủ thuật nhớ bảng mã sử dụng jquery. chúng tôi thêm một thuộc tính gọi là “mã hóa” vào phần tử đầu vào và chúng tôi đặt giá trị của nó thành mã hóa do jschardet tiết lộ

Ở giai đoạn này, nếu chúng tôi kiểm tra phần tử, chúng tôi sẽ thấy mã hóa trong mã HTML

  

      Upload your CSV
  
  

    
    Submit
  

2. Phân tích cú pháp với mã hóa phù hợp khi gửi tệp

Khi gửi tệp, chúng tôi có thể phân tích cú pháp CSV chính xác vì chúng tôi có mã hóa. Chúng tôi sẽ sử dụng thư viện PapaParse, một tài liệu tham khảo cho nhiệm vụ này. Nhưng bạn có thể sử dụng bất kỳ công cụ nào khác, cho phép bạn xác định mã hóa

Làm cách nào để đọc tệp CSV trong JavaScript?

Định dạng CSV của tôi là gì?

Làm cách nào để kiểm tra định dạng tệp CSV trong Java?

JavaScript có thể phân tích cú pháp CSV không?