JavaScript實(shí)現(xiàn)拼音排序的方法
更新時(shí)間:2012年11月20日 09:50:07 投稿:whsnow
本文將介紹JavaScript如何實(shí)現(xiàn)拼音排序 支持所有主流瀏覽器+中英文系統(tǒng)
一般情況下,大家會使用下面的方法來進(jìn)行漢字的拼音排序
復(fù)制代碼 代碼如下:
var list = [ '王', '張','李'];
list.sort(function (a, b) {
return a.localeCompare(b);
});
localeCompare() :用本地特定的順序來比較兩個(gè)字符串。
通過localeCompare這個(gè)方法來進(jìn)行拼音排序的不可靠之處在于:
1. 很依賴中文操作系統(tǒng)
2. 很依賴瀏覽器的內(nèi)核
也就是說,如果你的網(wǎng)站訪問者是通過非中文系統(tǒng),或者非IE瀏覽器(如Chrome),那么他將很可能無法看到我們所預(yù)期的拼音排序結(jié)果。
--------------------------------------------------------------------------------
下面介紹一下我解決這個(gè)問題的辦法,希望能拋磚引玉哈:
復(fù)制代碼 代碼如下:
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;
}
// 這里可以根據(jù)具體需求來改寫,目前的寫法是把空字符串排在最后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;
}
}
// 重寫系統(tǒng)原生的localeCompare
String.prototype.localeCompare = function (param) {
return CompareStrings.compare(this.toString(), param);
}
大家可以通過下面的鏈接下載到完整代碼 http://xiazai.jb51.net/201211/yuanma/js_pinyin_jb51.rar
簡單介紹一下實(shí)現(xiàn)的原理:
1. 取得按拼音排序好的字庫(db):有多種途徑可以達(dá)到目的,我是用JavaScript+C#組合完成的,先用腳本把所有漢字枚舉出來,再提交到C#后臺排序好,再輸出到前臺,這個(gè)只是準(zhǔn)備工作哈,怎么搞都可以。
2. 確定兩個(gè)字符誰比較大(getOrderedUnicode):因?yàn)榕判虻臅r(shí)候,不光要處理漢字,還要處理漢字以外的字符,所以比較器必須能識別所有的字符,這里我們通過判斷一個(gè)字符是否是漢字來區(qū)別對待:如果是漢字,那么就在排序好的字庫里搜索它的索引值,得到的索引值再加上Unicode字符集中第一個(gè)漢字所處的位置,就是在“校準(zhǔn)”以后的Unicode字符集中的索引值了;如果不是漢字,那么就直接返回它在Unicode字符集中的索引值即可。
3. 比較兩個(gè)字符串(compare):逐一比較兩個(gè)字符串中的每一個(gè)字符(在有效范圍內(nèi)比較,也就是較短的那個(gè)字符串的長度),如果發(fā)現(xiàn)a比b大,就返回1,反之返回-1。
4. 在有效范圍內(nèi)比較結(jié)束后如果還沒分出勝負(fù),就看誰比較長,例如a='123',b='1234',那么較長的b要排在后面。
綠色通道: 好文要頂 關(guān)注我 收藏該文與我聯(lián)系
相關(guān)文章
JS實(shí)現(xiàn)動態(tài)倒計(jì)時(shí)功能(天數(shù)、時(shí)、分、秒)
這篇文章主要介紹了JS實(shí)現(xiàn)動態(tài)倒計(jì)時(shí)功能詳解(天數(shù)、時(shí)、分、秒),需要的朋友可以參考下2019-12-12動態(tài)調(diào)整textarea中字體的大小代碼
用js批量輸出select事件控制textarea中字體的大小的代碼。2009-12-12原生js實(shí)現(xiàn)移動端Touch輪播圖的方法步驟
這篇文章主要介紹了原生js實(shí)現(xiàn)移動端Touch輪播圖的方法步驟,touch輪播圖其實(shí)就是通過手指的滑動,來左右切換輪播圖,touch輪播圖其實(shí)就是通過手指的滑動,來左右切換輪播圖,2019-01-01fastclick插件導(dǎo)致日期(input[type="date"])控件無法被觸發(fā)該如何解決
這篇文章主要介紹了fastclick插件導(dǎo)致日期(input[type="date"])控件無法被觸發(fā)該如何解決,需要的朋友可以參考下2015-11-11微信小程序?qū)崿F(xiàn)基于三元運(yùn)算驗(yàn)證手機(jī)號/姓名功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)基于三元運(yùn)算驗(yàn)證手機(jī)號/姓名功能,涉及三元運(yùn)算符的判定及字符串正則驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下2019-01-01JavaScript實(shí)現(xiàn)圖片懶加載的兩種方式
現(xiàn)在的科技發(fā)達(dá),圖片的資源占比越來越大,對圖片在頁面的優(yōu)化已經(jīng)成為前端開發(fā)必備的技術(shù)之一,難的圖片懶加載方法咱們看著頭大,簡單,易懂的才適合我們程序員,所以本文給大家介紹了JavaScript實(shí)現(xiàn)圖片懶加載的兩種方式,需要的朋友可以參考下2024-04-04調(diào)用jQuery滑出效果時(shí)閃爍的解決方法
這篇文章主要介紹了在調(diào)用jQuery 滑出效果時(shí),層會現(xiàn)次閃爍一下的解決方法,需要的朋友可以參考下2014-03-03