[Encoding – Javascript] Xử lý encoding trong javascript (validate, check, convert characters)

Bài toán tổng quát

Dựa trên chuỗi kí tự được nhập bởi người dùng để thực hiện các yêu cầu sau từ client bằng javascript:

  1. Validate dữ liệu, chỉ cho phép người dùng nhập các kí tự có trong bảng mã SHIFT-JIS, JIS, UTF-8, UTF-16, EUCJP, UNICODE,… và đồng thời show cho enduser biết kí tự nào bị sai không được nhập dưới dạng message lỗi
  2. Convert sang Encoding chỉ định để thực hiện encode rồi thực hiện một spec nào đó mà bạn cần. Chẳng hạn, gửi string encode cho bên thứ 3 xử lý.

Nội dung solution dưới đây sẽ giải quyết một bài toán (một tính năng) cụ thể mà tôi đã phát triển, được kiểm chứng và nộp cho khách hàng.

Ví dụ: Thực hiện validate hạng mục địa chỉ (address), chỉ cho phép enduser nhập các kí tự tồn tại trong bảng mã SHIFT-JIS và thông báo message error cho enduser biết các kí tự bị lỗi.

Tham khảo bảng mã shiftjis

Trả lời

Chú ý : Mã kí tự (character code) trong thế giới javascript là Unicode.

Trong NPM có một thư viện tên là encoding-japanese, nên tôi sử dụng nó. Chi tiết về cách setup lib xem tại encoding-japanese

Sau đây là step by step chi tiết cho solution bên trên. Giả sử input của solution là biến chứa chuỗi input có tên là strInput

Step 1: Lấy encoding hiện tại của chuỗi input, bằng dòng code

var detectedOrg = Encoding.detect(data);

Step 2: Lặp từng kí tự của chuỗi input strInput, với mỗi kí tự thứ i của chuỗi thì thực hiện

  • Lấy kí tự (char) và code của kí tự thứ i bằng đoạn mã
var strs = data.charAt(i);
var ucd = data.charCodeAt(i);
  • Thực hiện convert mã của kí tự sang mã SHIFT_JIS, bằng việc sử dụng method Encoding.convert như sau:
var shiftjisCode = Encoding.convert([ucd], 'SJIS');
  • Detect encoding của mã vừa convert trên:
var detected = Encoding.detect(shiftjisCode);
  • Kiểm tra:
    • nếu [detected === ‘SJIS’] thì đó là kí tự hợp lệ nên continue để xử lý kí tự tiếp theo.
    • Ngược lại thì xử lý bước tiếp theo.
  • Thực hiện convert mã kí tự từ encoding shift-jis về encoding ban đầu lấy được từ step 1 và chuyển mã thành kí tự bằng đoạn mã sau:
var strConvert2Org = Encoding.convert(shiftjisCode, {
				to: detectedOrg,
				from: 'SJIS',
				type: 'string'
				});
  • Thực hiện so sánh kí tự vừa nhận được strConvert2Org với kí tự ban đầu strs.

    • Nếu 2 kí tự khác nhau (strConvert2Org !== strs), tức là kí tự không tồn tại trong bảng mã SHIFT-JIS khi convert sẽ bị biến đổi thành kí tự khác. Khi đó lưu vào biến chứa các kí tự không hợp lệ.
    • Ngược lại, nếu 2 kí tự giống nhau thì đó là kí tự tồn tại trong bảng mã SHIFT-JIS nên không xử lý gì mà chuyển đến xử lý kí tự tiếp theo.
  • Kết thúc vòng lặp ta được một chuỗi các kí tự không hợp lệ

Souce code demo
    /**
     * Check charater exist in Shift-JIS (SJIS)
     *
     * @return: String - rỗng: nếu chuỗi input hợp lệ, ngược lại: là chuỗi các kí tự không hợp lệ
     */
    checkSJISCharacters : function (data) {
        var detectedorg = Encoding.detect(data);
        var strs = "";
        var stre = "";
        var ucd = 0;
        var len = (data && typeof data === 'string') ? data.length : 0;
        for(var i = 0; i < len; i++){
            strs = data.charAt(i);
            ucd = data.charCodeAt(i);
            var shiftjisCode = Encoding.convert([ucd], 'SJIS');
            
            // Detect the character encoding.
            var detected = Encoding.detect(shiftjisCode);
            if (detected === 'SJIS') {
                continue;
            }
            
            var convertString = Encoding.convert(shiftjisCode, {
                to: detectedorg,
                from: 'SJIS',
                type: 'string'
            });
            
            if(convertString !== strs) stre += strs;
        }
        
        return (stre);
    }

Chú ý: Áp dụng cho các bài toán phù hợp. Chẳng hạn như với các kí tự trong bảng mã khác mà thư viện hỗ trợ.

CHÚC CÁC BẠN THÀNH CÔNG!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Start a Blog at WordPress.com.

Up ↑

%d bloggers like this: