Javascript实现汉字和拼音互转的终极方案


Posted in Javascript onOctober 19, 2016

前言

中文汉字和拼音互转是很多地方都会遇到的,本文是精心整理并修改了网上几种常见的字典文件并简单封装了一下可以直接拿来用的工具库。有需要的下面来一起看看。

汉字转拼音:

Javascript实现汉字和拼音互转的终极方案

拼音转汉字:

Javascript实现汉字和拼音互转的终极方案

汉字与拼音相关知识普及

汉字范围

一般认为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, 复韵母有18个:ai , ei, ui , ao, ou, iu , ie, ve, er, an , en , in, un , vn , ang, eng, ing , ong,假设声母和韵母两两组合的话,会有24X21=504种组合,实际情况是有些组合是没有意义的,比如bv, gie, ve等,去除这部分后,还剩余412种。

拼音字典文件

按照字典文件的大小从小到大依次介绍。

字典一:拼音首字母

该 字典文件 的内容大致如下:

/**
 * 拼音首字母字典文件
 */
var pinyin_dict_firstletter = {};
pinyin_dict_firstletter.all = "YDYQSXMWZSSXJBYMGCCZQPSSQBYCDSCDQLDYLYBSSJG...";
pinyin_dict_firstletter.polyphone = {"19969":"DZ","19975":"WM","19988":"QJ","20048":"YL",...};

该数据字典将Unicode字符中 4E00 (19968)- 9FA5 (40869)共计20902个汉字的拼音首字母拼接在一起得到一个很长的字符串,然后再将有多音字的汉字(共计370个多音字)单独列出来。该字典文件大小为 25kb 。

该字典文件优点是体积小,支持多音字,缺点是只能获取拼音首字母。

字典二:常用汉字

该字典文件将汉字按照拼音进行归类,共计401种组合,收录了6763个常用汉字,不支持多音字。由于从网络上收集的,收录字数较少,所以文件体积只有24kb,后续有空看能不能给扩充一下。

字典文件大致内容如下(这里只是示例,所以只展示一小部分):

/**
 * 常规拼音数据字典,收录常见汉字6763个,不支持多音字
 */
var pinyin_dict_notone = 
{
 "a":"啊阿锕",
 "ai":"埃挨哎唉哀皑癌蔼矮艾碍爱隘诶捱嗳嗌嫒瑷暧砹锿霭",
 "an":"鞍氨安俺按暗岸胺案谙埯揞犴庵桉铵鹌顸黯",
 "ang":"肮昂盎",
 "ao":"凹敖熬翱袄傲奥懊澳坳拗嗷噢岙廒遨媪骜聱螯鏊鳌鏖",
 "ba":"芭捌扒叭吧笆八疤巴拔跋靶把耙坝霸罢爸茇菝萆捭岜灞杷钯粑鲅魃",
 "bai":"白柏百摆佰败拜稗薜掰鞴",
 "ban":"斑班搬扳般颁板版扮拌伴瓣半办绊阪坂豳钣瘢癍舨",
 "bang":"邦帮梆榜膀绑棒磅蚌镑傍谤蒡螃",
 "bao":"苞胞包褒雹保堡饱宝抱报暴豹鲍爆勹葆宀孢煲鸨褓趵龅",
 "bo":"剥薄玻菠播拨钵波博勃搏铂箔伯帛舶脖膊渤泊驳亳蕃啵饽檗擘礴钹鹁簸跛",
 "bei":"杯碑悲卑北辈背贝钡倍狈备惫焙被孛陂邶埤蓓呗怫悖碚鹎褙鐾",
 "ben":"奔苯本笨畚坌锛"
 // 省略其它
};

后来慢慢发现这个字典文件中存在诸多错误,比如把 虐 的拼音写成了 nue (正确写法应该是nve), 躺 写成了 thang ,而且不支持多音字,所以后来我根据其它字典文件自己重新生成了一份这样格式的 字典文件 :

      共有404种拼音组合

      收录了6763个常用汉字

      支持多音字

      不支持声调

      文件大小为27kb

同时,我根据网上一份 常用6763个汉字使用频率表 ,将这6763个汉字按照使用频率进行了排序,这样就可以实现一个差强人意的JS版输入法了。

另外,根据另外一份更完整的字典文件发现其实共有412种拼音组合,上面字典文件中没有出现的8种发音是:

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

字典三:终极字典

首先,从网上找的如下结构字典文件(下面称为字典A),具体是哪不记得了,支持声调和多音字,它将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)
...

其中,对于没有或者找不到读音的汉字,统一标注为 none0 ,我统计了一下,这样的汉字一共有525个。

本着将字典文件尽可能减小体积的目标,发现上述文件中除了第一个?(3007)之外,其它都是连续的,所以我把它改成了如下结构,文件体积也从 280kb 减小到了 117kb :

var pinyin_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...";

该字典文件的缺点是声调是用数字标出的,如果想要得出类似 xiǎo míng tóng xué 这样的拼音的话,需要一个算法将合适位置的字母转换成 āáǎàōóǒòēéěèīíǐìūúǔùüǖǘǚǜńň?

本来还准备自己尝试写一个转换的方法的,后来又找到了如下 字典文件 (下面称为字典B),它收录了20867个汉字,也支持声调和多音字,但是声调是直接标在字母上方的,由于它将汉字也列举出来,所以文件体积比较大,有 327kb ,大致内容如下:

{
 "吖": "yā,ā",
 "阿": "ā,ē",
 "呵": "hē,a,kē",
 "嗄": "shà,á",
 "啊": "ā,á,ǎ,à,a",
 "腌": "ā,yān",
 "锕": "ā",
 "?": "ā",
 "矮": "ǎi",
 "爱": "ài",
 "挨": "āi,ái",
 "哎": "āi",
 "碍": "ài",
 "癌": "ái",
 "艾": "ài",
 "唉": "āi,ài",
 "蔼": "ǎi"
 /* 省略其它 */
}

但是经过比对,发现有502个汉字是字典A中读音为 none 但是字典B中有读音的,还有21个汉字是字典A中有但是B中没有的:

{
 "??: "shí kè",
 "??: "qiān",
 "??: "fēn",
 "??: "máo",
 "??: "bǎi kè",
 "??: "lǐ",
 "?z": "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的基础上将二者进行了合并,得到了最终的字典文件 pinyin_dict_withtone.js ,文件大小为 122kb :

var pinyin_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ī...";

如何使用

我将这几种字典文件放在一起并简单封装了一下解析方法,使用中可以根据实际需要引入不同字典文件。

封装好的3个方法:

/**
 * 获取汉字的拼音首字母
 * @param str 汉字字符串,如果遇到非汉字则原样返回
 * @param polyphone 是否支持多音字,默认false,如果为true,会返回所有可能的组合数组
 */
pinyinUtil.getFirstLetter(str, polyphone);
/**
 * 根据汉字获取拼音,如果不是汉字直接返回原字符
 * @param str 要转换的汉字
 * @param splitter 分隔字符,默认用空格分隔
 * @param withtone 返回结果是否包含声调,默认是
 * @param polyphone 是否支持多音字,默认否
*/
pinyinUtil.getPinyin(str, splitter, withtone, polyphone);
/**
 * 拼音转汉字,只支持单个汉字,返回所有匹配的汉字组合
 * @param pinyin 单个汉字的拼音,不能包含声调
 */
pinyinUtil.getHanzi(pinyin);

下面分别针对不同场合如何使用作介绍。

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

<script type="text/javascript" src="pinyin_dict_firstletter.js"></script>
<script type="text/javascript" src="pinyinUtil.js"></script>

<script type="text/javascript">
pinyinUtil.getFirstLetter('小茗同学'); // 输出 XMTX
pinyinUtil.getFirstLetter('大中国', true); // 输出 ['DZG', 'TZG']
</script>

需要特别说明的是,如果你引入的是其它2个字典文件,也同样可以获取拼音首字母的,只是说用这个字典文件更适合。

如果拼音不需要声调

<script type="text/javascript" src="pinyin_dict_noletter.js"></script>
<script type="text/javascript" src="pinyinUtil.js"></script>

<script type="text/javascript">
pinyinUtil.getPinyin('小茗同学'); // 输出 'xiao ming tong xue'
pinyinUtil.getHanzi('ming'); // 输出 '明名命鸣铭冥茗溟酩瞑螟暝'
</script>

如果需要声调或者需要处理生僻字

<script type="text/javascript" src="pinyin_dict_withletter.js"></script>
<script type="text/javascript" src="pinyinUtil.js"></script>

<script type="text/javascript">
pinyinUtil.getPinyin('小茗同学'); // 输出 'xiǎo míng tóng xué'
pinyinUtil.getPinyin('小茗同学', '-', true, true); // 输出 ['xiǎo-míng-tóng-xué', 'xiǎo-míng-tòng-xué']
</script>

关于简单拼音输入法

一个正式的输入法需要考虑的东西太多太多,比如词库、用户个人输入习惯等,这里只是实现一个最简单的输入法,没有任何词库(虽然加上也可以,但是web环境不适合引入太大的文件)。

推荐使用第二个字典文件 pinyin_dict_noletter.js ,虽然字典三字数更多,但是不能按照汉字使用频率排序,一些生僻字反而在前面。

<link rel="stylesheet" type="text/css" href="simple-input-method/simple-input-method.css">
<input type="text" class="test-input-method"/>
<script type="text/javascript" src="pinyin_dict_noletter.js"></script>
<script type="text/javascript" src="pinyinUtil.js"></script>
<script type="text/javascript" src="simple-input-method/simple-input-method.js"></script>
<script type="text/javascript">
 SimpleInputMethod.init('.test-input-method');
</script>

总结

由于本工具类的目标环境是web,而web注定了文件体积不能太大,所以不能引入太大的词库文件,由于没有词库的支持,所以多音字无法识别,实现的拼音输入法也无法智能地匹配出合适的词语。以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助。

Javascript 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
详解 javascript对象创建模式
Oct 30 Javascript
Javascript typeof与instanceof的区别
Oct 18 #Javascript
javascript self对象使用详解
Oct 18 #Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 #Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 #Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 #Javascript
vue.js表格分页示例
Oct 18 #Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 #Javascript
You might like
Smarty模板快速入门
2007/01/04 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
vue实现简单学生信息管理
2020/05/30 Javascript
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
Python实现的tab文件操作类分享
2014/11/20 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
python框架django项目部署相关知识详解
2019/11/04 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
2019年Java 最常见的 面试题
2016/10/19 面试题
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS