Blackbing Playground

javascript UTF-8 繁體中文筆劃排序 解決之道

發表於 |

今天遇到一個客戶提出的需求，需要在前端做中文的筆劃排序，雖然已經跟客戶提出說UTF8很難做筆劃排序，但他們還是要求要依照筆劃來做排序。於是我就開始陷入編碼的世界而無法自拔（汗）。搜尋google大神的結果幾乎都是從資料庫端來解決，然而這次遇到的問題並不是單純將資料庫資料撈出來排序就可以搞定，而是要顯示在前端做動態的分群並且排序。因為實在是花了太多時間在找資料，而且大部分的解決方式都是N年前的解法，不適合現在的應用環境（UTF-8編碼），本篇文章是希望後續有人遇到類似的問題可以省點力氣，整理一些解決的方式。重點如下：

  1. 用javascript做中文排序至目前為止不可能，原因是UTF-8不是以筆劃排序，類似的方式可以用big5編碼轉成ASCII code做排序，但還是有缺點：
  2. Big-5 碼是按筆劃排，但是次常用字會排在後面，也就是說筆劃少的次常用字，反而會排在筆劃多的常用字後面，例如『万』會排在『籲』後面去。
  3. 現在已經沒有人在用big5編碼了，javascript UTF-8轉big5編碼沒有更好的支援函式，就算有也要load進一個大的table來做比對，因此在前端做排序幾乎是不可能。
  4. localCompare 如果一定要在前端做排序，這個方法是最簡單的用法，但是實際使用的結果也不是依照筆劃排序，看起來應該跟系統的實做有關，如果能夠用這個方法安撫客戶，那就用這個吧。

  5. cht_strokesort.php：我自製的排序 API，sourcecode 放在https://gist.github.com/1150937，具體實現如下：

    1. 將UTF-8轉成big5編碼。
    2. 用big5碼反查筆劃，筆劃資料來源為倚天中文字型筆劃順序內碼對照表，不是單純以ASCII Code來決定筆劃順序。
    3. 做了一個http接口，可利用AJAX來做到中文排序。

DEMO :

http://blackbing.net/lab/CHTSort/cht_strokesort.html

原始碼：

https://gist.github.com/1150937

參考資料：

  1. Big5 碼名稱的由來
  2. 中文排序的問題
  3. 如何用javascript做中文排序
  4. 讓資料按照中文筆劃排序

暫時解決這個問題，但眼睛好痛，編碼這種事真不是人幹的。收工！