前面写了一篇 js中文首字母排序（一）
文章主要是应用过来js的两个方法，sort（）和 localeCompare()
但使用两个方法进行排序会出现一些问题，可用性不高
由于最近刚好需要实现一个功能点，在移动端实现通讯录的名称排序功能，即要实现，各字段要按照中文首字母在ascii表中的顺序分类并从上到下排列好（吐槽下：现在对前端的要求的技术越来越多了，希望大前端越来越好）
研究了两天，在网上找了不少资料（感谢前辈们的无私奉献），用了另外一种解决方案
使用整理好的Unicode编码对照表（非本人整理）进行排序
实现思路是按照中文字符在Unicode中的编码对应对照表中的字母进行转换，再根据ascii码表进行排序，测试过可实现需求
下面发一个移动端的排序demo（需要对照表请留邮箱）
html：
<!DOCTYPE html> <html> <head> <title>排序</title> <meta charset="UTF-8"> </meta> <meta author="alex"> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> <ul id="list"></ul> <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script> <script src="js/sortUnicode.js" type="text/javascript"></script> <script src="js/sort.js" type="text/javascript"></script> <script> $.sort({ //调用sort并传入排序字符串数组，注意格式 str : ["小龙女","杨过","郭靖","独孤求败","黄蓉","欧阳锋","洪七公","王重阳","一灯","黄药师","梅超风","陆无双","程英","李莫愁","穆念慈","金轮法王"]
//传入排序字符串 //功能未完善，待开发 }); </script> </body> </html>
css:
<style> body{margin:0;padding:0} #list{padding:0 2%;list-style-type:none} #list li{border:1px solid #dfdfdf;height:2em;line-height:2em;padding-left:2%} #list .listTitle{background-color:#adadad;color:#fff} #list .listCon:hover{background-color:#c2c2c2} #list .listCon{color:#000} </style>
js：
/* * author:alex * updateTime:2015-11-12 * 中文排序1.0 */ (function ($) { $.sort = function(options) { var dft = { str : [] }; var obj = $.extend(dft,options); //判断首字母数组 var pinYin = executive(obj.str); // 得到一串首字母数组 var arry = []; for(var i=0;i<pinYin.length;i++){ arry[i]=pinYin[i]; } var temp; var listLi=""; function executive(str){ var isEnglishOrNum = /^[A-Za-z0-9]+$/; //正则验算是否英文字母或数字 var arr = []; //存储各字符串首字母 var j = 0; for(var i=0;i<str.length;i++){ if(Object.prototype.toString.call(str[i]) === "[object String]"){ //判断是否为字符串 var sing = str[i].substring(0,1); //截取字符串首个字符 var ch = str[i].charCodeAt(0); //获取字符对应Unicode编码值 if(isEnglishOrNum.test(sing)){ //判断是否为英文字母或数字 arr[j++] = sing.toUpperCase(); //是则将字符赋值给数组 }else{ if(ch<40869&&ch>19968){ //判断字符编码值在19968到40869之间 arr[j++]=strChineseFirstPY.charAt(ch-19968); //获取对应表中的字母并赋值到数组 }else{ alert("字符串首字母仅支持字母和数字"); return false; } } }else{ alert("请检查您输入的字符串数组是否有误"); return false; } } return arr; } for(var i=0;i<pinYin.length-1;i++){ //将出现的字符按ascii顺序由小到大存进数组 for(var j=0;j<pinYin.length-1-i;j++){ if(pinYin[j]>pinYin[j+1]){ temp = pinYin[j]; pinYin[j] = pinYin[j+1]; pinYin[j+1] = temp; } } } for(var i=0;i<pinYin.length;i++){ //生成拥有的字符 if(pinYin[i]!=pinYin[i-1]){ listLi += "<li id=‘"+pinYin[i]+"‘ class=‘listTitle‘><b>"+pinYin[i]+"</b></li>"; } } $("#list").html(listLi); for(var i=0;i<obj.str.length;i++){ //将各字段放进相应的字符区间 var li = "<li class=‘listCon‘>"+obj.str[i]+"</li>"; $("#"+arry[i]+"").after(li); } } })(jQuery);
效果图：
原文：http://www.cnblogs.com/alex-web/p/4969676.html