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 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
vue综合组件间的通信详解
Nov 06 Javascript
详解vue axios二次封装
Jul 22 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
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
php 调用远程url的六种方法小结
2009/11/02 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Python元组知识点总结
2019/02/18 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
django创建超级用户过程解析
2019/09/18 Python
python可视化实现KNN算法
2019/10/16 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
python Pexpect模块的使用
2020/12/25 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
超市开学活动方案
2014/03/01 职场文书
交通安全横幅标语
2014/10/07 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
学校捐书倡议书
2015/04/27 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫