（點擊上方公眾號，可快速關(guān)注）

　　作者：我是小茗同學(xué)

　　鏈接：www.cnblogs.com/liuxianan/p/pinyinjs.html

前言

　　網(wǎng)上關(guān)于JS實現(xiàn)漢字和拼音互轉(zhuǎn)的文章很多，但是比較雜亂，都是互相抄來抄去，而且有的不支持多音字，有的不支持聲調(diào)，有的字典文件太大，還比如有時候我僅僅是需要獲取漢字拼音首字母卻要引入200kb的字典文件，無法根據(jù)實際需要滿足需求。

　　綜上，我精心整理并修改了網(wǎng)上幾種常見的字典文件并簡單封裝了一下可以直接拿來用的工具庫。

　　這篇文章差不多一個月前就寫好了大部分了，但是就差拼音輸入法這一塊一直沒時間去弄(與其說是沒時間，還不如說是本人太懶)，所以一直拖到今天才發(fā)表。

代碼和DEMO演示

　　github項目地址：https://github.com/liuxianan/pinyinjs

　　完整demo演示：https://demo.liuxianan.com/pinyinjs/

　　帶多音字識別的演示：https://demo.liuxianan.com/pinyinjs/polyphone.html

　　漢字轉(zhuǎn)拼音：

　　帶詞庫的識別多音字的漢字轉(zhuǎn)拼音：

　　拼音轉(zhuǎn)漢字（簡單的拼音輸入法）：

　　關(guān)于多音字

　　鑒于很多人都比較關(guān)心多音字的問題，所以單獨拿出一個小章節(jié)來介紹多音字的相關(guān)問題。

　　準確識別各種復(fù)雜語句中混雜的多音字其實并沒有那么容易，有兩個關(guān)鍵的地方，一個是多音字詞庫的豐富程度，一個是能否正確的給語句進行分詞。而詞庫和分詞的實現(xiàn)都需要一個非常豐富的詞典文件，現(xiàn)代漢語詞語有多少個，估計沒有人算得清，再加上每天新出現(xiàn)的人名、網(wǎng)絡(luò)詞語、科技詞語等等。一個普通的詞庫文件至少也有幾百kb，所以不太適合web環(huán)境下去實現(xiàn)，一般最好放在服務(wù)器端做成一個接口。

　　鑒于很多人都希望有多音字識別的功能，所以我簡單實現(xiàn)了一個版本。詞庫文件是從這里找到的，并根據(jù)實際情況將文件從1.8M壓縮到了912kb，分詞暫時只是自己非常簡單的實現(xiàn)(也可以說壓根就沒有分詞)，如果是服務(wù)器端推薦幾個不錯的中文分詞工具：Python版的Jieba和NodeJieba，性能非常好，其它語言版的參考上面項目的README。

　　關(guān)于分詞，摘抄一段網(wǎng)絡(luò)解釋：

　　詞是最小的能夠獨立活動的有意義的語言成分，英文單詞之間是以空格作為自然分界符的，而漢語是以字為基本的書寫單位，詞語之間沒有明顯的區(qū)分標(biāo)記，因此，要對中文信息進行處理，正確的分詞就顯得尤為關(guān)鍵。

　　比如看中國這一個詞，單獨的看中讀kàn zhòng，中國讀zhōng guó，連在一起卻讀作kàn zhōng guó。

　　我這個實現(xiàn)非常得簡單，效果一般，性能也一般，需要下載將近1M的詞庫文件，所以不適合web環(huán)境，演示地址：

　　https://demo.liuxianan.com/pinyinjs/polyphone.html

　　漢字與拼音相關(guān)知識普及 漢字范圍

　　一般認為Unicode編碼中的漢字范圍是 /^[\u2E80-\u9FFF]+$/(11904-40959)，但是其中有很多不是漢字，或者說是可以讀的漢字，本文用到的幾個字典文件的漢字范圍均是 /^[\u4E00-\u9FA5]+$/，也就是(19968-40869)，另外還有一個單獨的漢字〇，其Unicode位置是12295。

　　拼音組合

　　漢字有21個聲母：b, p, m, f, d, t, n, l, g, k, h, j, q, x, zh, ch, sh, r, z, c, s，24個韻母，其中單韻母有6個：a, o, e, i, u, v, 復(fù)韻母有18個：ai , ei, ui , ao, ou, iu , ie, ve, er, an , en , in, un , vn , ang, eng, ing , ong，假設(shè)聲母和韻母兩兩組合的話，會有24X21=504種組合，實際情況是有些組合是沒有意義的，比如bv, gie, ve等，去除這部分后，還剩余412種。

　　拼音字典文件

　　按照字典文件的大小從小到大依次介紹。

　　字典一：拼音首字母

　　該字典文件的內(nèi)容大致如下：

　　/**

　　* 拼音首字母字典文件

　　*/

　　varpinyin_dict_firstletter= {};

　　pinyin_dict_firstletter.all= "YDYQSXMWZSSXJBYMGCCZQPSSQBYCDSCDQLDYLYBSSJG...";

　　pinyin_dict_firstletter.polyphone= {"19969":"DZ","19975":"WM","19988":"QJ","20048":"YL",...};

　　該數(shù)據(jù)字典將Unicode字符中4E00(19968)-9FA5(40869)共計20902個漢字的拼音首字母拼接在一起得到一個很長的字符串，然后再將有多音字的漢字（共計370個多音字）單獨列出來。該字典文件大小為25kb。

　　該字典文件優(yōu)點是體積小，支持多音字，缺點是只能獲取拼音首字母。

　　字典二：常用漢字

　　該字典文件將漢字按照拼音進行歸類，共計401種組合，收錄了6763個常用漢字，不支持多音字。由于從網(wǎng)絡(luò)上收集的，收錄字數(shù)較少，所以文件體積只有24kb，后續(xù)有空看能不能給擴充一下。

　　字典文件大致內(nèi)容如下（這里只是示例，所以只展示一小部分）：

　　/**

　　* 常規(guī)拼音數(shù)據(jù)字典，收錄常見漢字6763個，不支持多音字

　　*/

　　varpinyin_dict_notone=

　　{

　　"a":"啊阿錒",

　　"ai":"埃挨哎唉哀皚癌藹矮艾礙愛隘誒捱噯嗌嬡璦曖砹锿靄",

　　"an":"鞍氨安俺按暗岸胺案諳埯揞犴庵桉銨鵪頇黯",

　　"ang":"骯昂盎",

　　"ao":"凹敖熬翱襖傲奧懊澳坳拗嗷噢岙廒遨媼驁聱螯鏊鰲鏖",

　　"ba":"芭捌扒叭吧笆八疤巴拔跋靶把耙壩霸罷爸茇菝萆捭岜灞杷鈀粑鲅魃",

　　"bai":"白柏百擺佰敗拜稗薜掰鞴",

　　"ban":"斑班搬扳般頒板版扮拌伴瓣半辦絆阪坂豳鈑瘢癍舨",

　　"bang":"邦幫梆榜膀綁棒磅蚌鎊傍謗蒡螃",

　　"bao":"苞胞包褒雹保堡飽寶抱報暴豹鮑爆勹葆宀孢煲鴇褓趵齙",

　　"bo":"剝薄玻菠播撥缽波博勃搏鉑箔伯帛舶脖膊渤泊駁亳蕃啵餑檗擘礴鈸鵓簸跛",

　　"bei":"杯碑悲卑北輩背貝鋇倍狽備憊焙被孛陂邶埤蓓唄怫悖碚鵯褙鐾",

　　"ben":"奔苯本笨畚坌錛"

　　// 省略其它

　　};

　　后來慢慢發(fā)現(xiàn)這個字典文件中存在諸多錯誤，比如把虐的拼音寫成了nue（正確寫法應(yīng)該是nve）,躺寫成了thang，而且不支持多音字，所以后來我根據(jù)其它字典文件自己重新生成了一份這樣格式的 字典文件：

共有404種拼音組合

收錄了6763個常用漢字

支持多音字

不支持聲調(diào)

文件大小為27kb

　　同時，我根據(jù)網(wǎng)上一份常用6763個漢字使用頻率表，將這6763個漢字按照使用頻率進行了排序，這樣就可以實現(xiàn)一個差強人意的JS版輸入法了。

　　另外，根據(jù)另外一份更完整的字典文件發(fā)現(xiàn)其實共有412種拼音組合，上面字典文件中沒有出現(xiàn)的8種發(fā)音是：

　　chua,den,eng,fiao,m,kei,nun,shei

字典三：終極字典

　　首先，從網(wǎng)上找的如下結(jié)構(gòu)字典文件（下面稱為字典A），具體是哪不記得了，支持聲調(diào)和多音字，它將Unicode字符中4E00(19968)-9FA5(40869)共計20902個漢字（如果算上〇的話那就是20903個）拼音全部列舉，該字典文件大小為280kb：

　　3007(ling2)

　　4E00(yi1)

　　4E01(ding1,zheng1)

　　4E02(kao3)

　　4E03(qi1)

　　4E04(shang4,shang3)

　　4E05(xia4)

　　4E06(none0)

　　4E07(wan4,mo4)

　　4E08(zhang4)

　　4E09(san1)

　　4E0A(shang4,shang3)

　　4E0B(xia4)

　　4E0C(ji1)

　　4E0D(bu4,bu2,fou3)

　　4E0E(yu3,yu4,yu2)

　　4E0F(mian3)

　　4E10(gai4)

　　4E11(chou3)

　　4E12(chou3)

　　4E13(zhuan1)

　　4E14(qie3,ju1)

　　...

　　其中，對于沒有或者找不到讀音的漢字，統(tǒng)一標(biāo)注為none0，我統(tǒng)計了一下，這樣的漢字一共有525個。

　　本著將字典文件盡可能減小體積的目標(biāo)，發(fā)現(xiàn)上述文件中除了第一個〇(3007)之外，其它都是連續(xù)的，所以我把它改成了如下結(jié)構(gòu)，文件體積也從280kb減小到了117kb：

　　varpinyin_dict_withtone= "yi1,ding1 zheng1,kao3,qi1,shang4 shang3,xia4,none0,wan4 mo4,zhang4,san1,shang4 shang3,xia4,ji1,bu4 bu2 fou3,yu3 yu4 yu2,mian3,gai4,chou3,chou3,zhuan1,qie3 ju1...";

　　該字典文件的缺點是聲調(diào)是用數(shù)字標(biāo)出的，如果想要得出類似xiǎo míng tóng xué這樣的拼音的話，需要一個算法將合適位置的字母轉(zhuǎn)換成āáǎàōóǒòēéěèīíǐìūúǔùüǖǘǚǜńň。

　　本來還準備自己嘗試寫一個轉(zhuǎn)換的方法的，后來又找到了如下字典文件(下面稱為字典B)，它收錄了20867個漢字，也支持聲調(diào)和多音字，但是聲調(diào)是直接標(biāo)在字母上方的，由于它將漢字也列舉出來，所以文件體積比較大，有327kb，大致內(nèi)容如下：

　　{

　　"吖": "yā,ā",

　　"阿": "ā,ē",

　　"呵": "hē,a,kē",

　　"嗄": "shà,á",

　　"啊": "ā,á,ǎ,à,a",

　　"腌": "ā,yān",

　　"錒": "ā",

　　"錒": "ā",

　　"矮": "ǎi",

　　"愛": "ài",

　　"挨": "āi,ái",

　　"哎": "āi",

　　"礙": "ài",

　　"癌": "ái",

　　"艾": "ài",

　　"唉": "āi,ài",

　　"藹": "ǎi"

　　/* 省略其它 */

　　}

　　但是經(jīng)過比對，發(fā)現(xiàn)有502個漢字是字典A中讀音為none但是字典B中有讀音的，還有21個漢字是字典A中有但是B中沒有的：

　　{

　　"兙": "shí kè",

　　"兛": "qiān",

　　"兝": "fēn",

　　"兞": "máo",

　　"兡": "bǎi kè",

　　"兣": "lǐ",

　　"唞": "dǒu",

　　"嗧": "jiā lún",

　　"囍": "xǐ",

　　"堎": "lèng líng",

　　"猤": "hú",

　　"瓩": "qián wǎ",

　　"礽": "réng",

　　"膶": "rùn",

　　"芿": "rèng",

　　"蟘": "tè",

　　"貣": "tè",

　　"釀": "niàng niàn niáng",

　　"醸": "niàng",

　　"鋱": "tè",

　　"鋱": "tè"

　　}

　　還有7個漢字是B中有但是A中沒有的：

　　{

　　"?": "lēng",

　　"?": "léng",

　　"?": "léng",

　　"?": "lèng",

　　"?": "lèng,lì,lìn",

　　"?": "réng",

　　"?": "niàng"

　　}

　　所以我在字典A的基礎(chǔ)上將二者進行了合并，得到了最終的字典文件 pinyin_dict_withtone.js，文件大小為122kb：

　　varpinyin_dict_withtone="yī,dīng zhēng,kǎo qiǎo yú,qī,shàng,xià,hǎn,wàn mò,zhàng,sān,shàng shǎng,xià,qí jī...";

如何使用

　　我將這幾種字典文件放在一起并簡單封裝了一下解析方法，使用中可以根據(jù)實際需要引入不同字典文件。

　　封裝好的3個方法：

　　/**

　　* 獲取漢字的拼音首字母

　　* @param str 漢字字符串，如果遇到非漢字則原樣返回

　　* @param polyphone 是否支持多音字，默認false，如果為true，會返回所有可能的組合數(shù)組

　　*/

　　pinyinUtil.getFirstLetter(str,polyphone);

　　/**

　　* 根據(jù)漢字獲取拼音，如果不是漢字直接返回原字符

　　* @param str 要轉(zhuǎn)換的漢字

　　* @param splitter 分隔字符，默認用空格分隔

　　* @param withtone 返回結(jié)果是否包含聲調(diào)，默認是

　　* @param polyphone 是否支持多音字，默認否

　　*/

　　pinyinUtil.getPinyin(str,splitter,withtone,polyphone);

　　/**

　　* 拼音轉(zhuǎn)漢字，只支持單個漢字，返回所有匹配的漢字組合

　　* @param pinyin 單個漢字的拼音，不能包含聲調(diào)

　　*/

　　pinyinUtil.getHanzi(pinyin)；

　　下面分別針對不同場合如何使用作介紹。

　　如果你只需要獲取拼音首字母

　　< type="text/java"src="pinyin_dict_firstletter.js"></>

　　< type="text/java"src="pinyinUtil.js"></>

　　< type="text/java">

　　pinyinUtil.getFirstLetter('小茗同學(xué)');// 輸出 XMTX

　　pinyinUtil.getFirstLetter('大中國',true);// 輸出 ['DZG', 'TZG']

　　</>

　　需要特別說明的是，如果你引入的是其它2個字典文件，也同樣可以獲取拼音首字母的，只是說用這個字典文件更適合。

　　如果拼音不需要聲調(diào)

　　< type="text/java"src="pinyin_dict_notone.js"></>

　　< type="text/java"src="pinyinUtil.js"></>

　　< type="text/java">

　　pinyinUtil.getPinyin('小茗同學(xué)');// 輸出 'xiao ming tong xue'

　　pinyinUtil.getHanzi('ming');// 輸出 '明名命鳴銘冥茗溟酩瞑螟暝'

　　</>

　　如果需要聲調(diào)或者需要處理生僻字

　　< type="text/java"src="pinyin_dict_withtone.js"></>

　　< type="text/java"src="pinyinUtil.js"></>

　　< type="text/java">

　　pinyinUtil.getPinyin('小茗同學(xué)');// 輸出 'xiǎo míng tóng xué'

　　pinyinUtil.getPinyin('小茗同學(xué)','-',true,true);// 輸出 ['xiǎo-míng-tóng-xué', 'xiǎo-míng-tòng-xué']

　　</>

　　如果需要精準識別多音字

　　由于詞典文件較大，本示例不推薦在web環(huán)境下使用：

　　< type="text/java"src="dict/pinyin_dict_withtone.js"></>

　　< type="text/java"src="dict/pinyin_dict_polyphone.js"></>

　　< type="text/java"src="pinyinUtil.js"></>

　　< type="text/java">

　　pinyinUtil.getPinyin('長城和長大',' ',true,true)；// 輸出：cháng chéng hé zhǎng dà

　　pinyinUtil.getPinyin('喝水和喝彩',' ',true,true)；// 輸出：hē shuǐ hé hè cǎi

　　pinyinUtil.getPinyin('偉大的大夫',' ',true,true)；// 輸出：wěi dà de dài fū

　　</>

　　關(guān)于簡單拼音輸入法

　　一個正式的輸入法需要考慮的東西太多太多，比如詞庫、用戶個人輸入習(xí)慣等，這里只是實現(xiàn)一個最簡單的輸入法，沒有任何詞庫（雖然加上也可以，但是web環(huán)境不適合引入太大的文件）。

　　推薦使用第二個字典文件pinyin_dict_notone.js，雖然字典三字數(shù)更多，但是不能按照漢字使用頻率排序，一些生僻字反而在前面。

　　<link rel="stylesheet"type="text/css"href="simple-input-method/simple-input-method.css">

　　<input type="text"class="163e-8670-7ab1-0d97 test-input-method"/>

　　< type="text/java"src="pinyin_dict_notone.js"></>

　　< type="text/java"src="pinyinUtil.js"></>

　　< type="text/java"src="simple-input-method/simple-input-method.js"></>

　　< type="text/java">

　　SimpleInputMethod.init('.test-input-method');

　　</>

　　結(jié)語

　　由于本工具類的目標(biāo)環(huán)境是web，而web注定了文件體積不能太大，所以不能引入太大的詞庫文件，由于沒有詞庫的支持，所以多音字無法識別，實現(xiàn)的拼音輸入法也無法智能地匹配出合適的詞語，需要詞庫支持的可以參考這個nodejs環(huán)境下的項目：https://github.com/hotoo/pinyin

關(guān)注「前端大全」

看更多精選前端技術(shù)文章

↓↓↓