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 相关文章推荐
事件模型在各浏览器中存在差异
Oct 20 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 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
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
jquery等待效果示例
2014/05/01 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
python概率计算器实例分析
2015/03/25 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Django 静态文件配置过程详解
2019/07/23 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
护士思想汇报
2014/01/12 职场文书
酒店节能减排方案
2014/05/26 职场文书
中职生自荐信范文
2014/06/15 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
紧急通知
2015/04/17 职场文书
房屋所有权证明
2015/06/19 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL