JavaScript实现拼音排序的方法


Posted in Javascript onNovember 20, 2012

一般情况下,大家会使用下面的方法来进行汉字的拼音排序

var list = [ '王', '张','李']; 
list.sort(function (a, b) { 
return a.localeCompare(b); 
});

localeCompare() :用本地特定的顺序来比较两个字符串。
通过localeCompare这个方法来进行拼音排序的不可靠之处在于:
1. 很依赖中文操作系统
2. 很依赖浏览器的内核
也就是说,如果你的网站访问者是通过非中文系统,或者非IE浏览器(如Chrome),那么他将很可能无法看到我们所预期的拼音排序结果。
--------------------------------------------------------------------------------
下面介绍一下我解决这个问题的办法,希望能抛砖引玉哈:
本方法支持Unicode字符集中从0x4E00到 0x9FA5 的连续区域内共20902个来自中国(包括台湾)、日本、韩国的汉字,即CJK(Chinese Japanese Korean)汉字。
var CompareStrings = { 
db: '吖阿啊锕?嗄哎哀...???????', // 其中省略几万字 
getOrderedUnicode: function (char) { 
var originalUnicode = char.charCodeAt(); 
if (originalUnicode >= 0x4E00 && originalUnicode <= 0x9FA5) { 
var index = this.db.indexOf(char); 
if (index > -1) { 
return index + 0x4E00; 
} 
} 
return originalUnicode; 
}, 
compare: function (a, b) { 
if (a == b) {return 0; 
} 
// 这里可以根据具体需求来改写,目前的写法是把空字符串排在最后if (a.length == 0) { return 1; } 
if (b.length == 0) { return -1; } 
var count = a.length > b.length ? b.length : a.length; 
for (var i = 0; i < count; i++) { 

var au = this.getOrderedUnicode(a[i]); 

var bu = this.getOrderedUnicode(b[i]); 

if (au > bu) { 

 return 1; 

} else if (au < bu) { 

 return -1; 

} 
} 
return a.length > b.length ? 1 : -1; 
 } 
} 
// 重写系统原生的localeCompare 
String.prototype.localeCompare = function (param) { 

return CompareStrings.compare(this.toString(), param); 
}

大家可以通过下面的链接下载到完整代码 http://xiazai.3water.com/201211/yuanma/js_pinyin_3water.rar
简单介绍一下实现的原理:
1. 取得按拼音排序好的字库(db):有多种途径可以达到目的,我是用JavaScript+C#组合完成的,先用脚本把所有汉字枚举出来,再提交到C#后台排序好,再输出到前台,这个只是准备工作哈,怎么搞都可以。
2. 确定两个字符谁比较大(getOrderedUnicode):因为排序的时候,不光要处理汉字,还要处理汉字以外的字符,所以比较器必须能识别所有的字符,这里我们通过判断一个字符是否是汉字来区别对待:如果是汉字,那么就在排序好的字库里搜索它的索引值,得到的索引值再加上Unicode字符集中第一个汉字所处的位置,就是在“校准”以后的Unicode字符集中的索引值了;如果不是汉字,那么就直接返回它在Unicode字符集中的索引值即可。
3. 比较两个字符串(compare):逐一比较两个字符串中的每一个字符(在有效范围内比较,也就是较短的那个字符串的长度),如果发现a比b大,就返回1,反之返回-1。
4. 在有效范围内比较结束后如果还没分出胜负,就看谁比较长,例如a='123',b='1234',那么较长的b要排在后面。
绿色通道: 好文要顶 关注我 收藏该文与我联系
Javascript 相关文章推荐
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
js给selected添加options的方法
May 06 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
原生js实现俄罗斯方块
Oct 20 Javascript
Js+Flash实现访问剪切板操作
Nov 20 #Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 #Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 #Javascript
基于jquery库的tab新形式使用
Nov 16 #Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 #Javascript
javascript 图片裁剪技巧解读
Nov 15 #Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 #Javascript
You might like
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
PHP 微信支付类 demo
2015/11/30 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
vue项目实现图片上传功能
2019/12/23 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
简单了解Django模板的使用
2017/12/20 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
django跳转页面传参的实现
2020/09/17 Python
25道Java面试题集合
2013/05/21 面试题
汽车检测与维修专业求职信
2013/10/30 职场文书
员工工作表扬信范文
2014/01/13 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
生日答谢词
2015/01/05 职场文书
停电通知范文
2015/04/16 职场文书