js 混合排序(类似中文手机操作系统中的通讯录排序)_晚秋_前端开发者

在阳光明媚最适合打盹的下午, 特意静音的手机竟然动起来了, 你没看错, 它震动了….

上帝(顾客)来电, “报表查询系统左侧树状菜单中设备的中文名称不能排序”, 要增加排序功能….bu la…bu la… , 增加xxx  ,增加xxx

开始干吧! 原谅我上面那么多废话…

原谅我上面那么多废话…

华丽的分割线

华丽的分割线


 

直接上代码

要排序的数据如下图:

 

下面是代码(废话):

废话

 1 // 数字字母中文混合排序
 2 function arrSortMinToMax(a, b) {
 3     // 判断是否为数字开始; 为啥要判断?看上图源数据
 4     if (/^\d+/.test(a.Name) && /^\d+/.test(b.Name)) {
 5         // 提取起始数字, 然后比较返回
 6         return /^\d+/.exec(a.Name) - /^\d+/.exec(b.Name);
 7         // 如包含中文, 按照中文拼音排序
 8     } else if (isChinese(a.Name) && isChinese(b.Name)) {
 9         // 按照中文拼音, 比较字符串
10         return a.Name.localeCompare(b.Name, 'zh-CN')
11     } else {
12         // 排序数字和字母
13         return a.Name.localeCompare(b.Name, 'en');
14     }
15 }
16 
17 // 检测是否为中文,true表示是中文,false表示非中文
18 function isChinese(str) {
19     // 中文万国码正则
20     if (/[\u4E00-\u9FCC\u3400-\u4DB5\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\ud840-\ud868][\udc00-\udfff]|\ud869[\udc00-\uded6\udf00-\udfff]|[\ud86a-\ud86c][\udc00-\udfff]|\ud86d[\udc00-\udf34\udf40-\udfff]|\ud86e[\udc00-\udc1d]/.test(str)) {
21         return true;
22     } else {
23         return false;
24     }
25 }
 1 // 数字字母中文混合排序
 2 function arrSortMinToMax(a, b) {
 3     // 判断是否为数字开始; 为啥要判断?看上图源数据
 4     if (/^\d+/.test(a.Name) && /^\d+/.test(b.Name)) {
 5         // 提取起始数字, 然后比较返回
 6         return /^\d+/.exec(a.Name) - /^\d+/.exec(b.Name);
 7         // 如包含中文, 按照中文拼音排序
 8     } else if (isChinese(a.Name) && isChinese(b.Name)) {
 9         // 按照中文拼音, 比较字符串
10         return a.Name.localeCompare(b.Name, 'zh-CN')
11     } else {
12         // 排序数字和字母
13         return a.Name.localeCompare(b.Name, 'en');
14     }
15 }
16 
17 // 检测是否为中文,true表示是中文,false表示非中文
18 function isChinese(str) {
19     // 中文万国码正则
20     if (/[\u4E00-\u9FCC\u3400-\u4DB5\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\ud840-\ud868][\udc00-\udfff]|\ud869[\udc00-\uded6\udf00-\udfff]|[\ud86a-\ud86c][\udc00-\udfff]|\ud86d[\udc00-\udf34\udf40-\udfff]|\ud86e[\udc00-\udc1d]/.test(str)) {
21         return true;
22     } else {
23         return false;
24     }
25 }

1// 数字字母中文混合排序 2function arrSortMinToMax(a, b) {
3// 判断是否为数字开始; 为啥要判断?看上图源数据 4if.test(b.Name)) {
5// 提取起始数字, 然后比较返回 6return.exec(b.Name);
7// 如包含中文, 按照中文拼音排序 8elseif isChinese(b.Name)) {
9// 按照中文拼音, 比较字符串10return)
11else {
12// 排序数字和字母13return);
14 }
15}
1617// 检测是否为中文,true表示是中文,false表示非中文18function isChinese(str) {
19// 中文万国码正则20if.test(str)) {
21returntrue;
22else {
23returnfalse;
24 }
25

排序结果如下图:

 

 搞定收工!

没错, 实现这个排序实际用了不到20行代码, 开始也当回事, 觉得可以分分钟搞定(不擅长前端的猿), 结果折腾了大半天….

 

 

 其实排序关键在中文拼音这块, 还有就是”数字开头”的字符串要优先按照前面的数字排序. 好了, 为了实现参阅了以下资料, 有兴趣再优化的同学可以参考以下连接:

http://www.unicode.org/charts/

http://www.unicode.org/charts/

http://www.unicode.org/reports/tr38/#BlockListing

http://www.unicode.org/reports/tr38/#BlockListing

 

String.prototype.localeCompare() 详解

https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/string/localecompare#Examples

https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/string/localecompare#Examples

 

 

 

 

» 本文来自:前端开发者 » 《js 混合排序(类似中文手机操作系统中的通讯录排序)_晚秋_前端开发者》
» 本文链接地址:https://www.rokub.com/73377.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!