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 相关文章推荐
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
JavaScript如何判断input数据类型
Feb 06 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
10条PHP编程习惯助你找工作
2008/09/29 PHP
php 购物车的例子
2009/05/04 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
python中的global关键字的使用方法
2019/08/20 Python
pywinauto自动化操作记事本
2019/08/26 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
python推导式的使用方法实例
2021/02/28 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
《生命的药方》教学反思
2014/04/08 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
生日庆典策划方案
2014/06/02 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript