基于javascript的拼音字典及应用举例
不论是浏览器还是操作系统，对中文的支持已经有了长足的进步，但是在一些细节方面仍然存在不足。比如，在windows文件浏览时，我们可以通过按下文件夹名的首字母来快速定位文件夹，但是对于文件夹名为中文的文件夹却无能为力。类似的，在网页浏览中，也存在类似问题。这种问题不会妨碍使用，但却伤害体验。本文分两部分，第一部分简单介绍基于javascript的拼音字典的构造方法；第二部分简单介绍几个应用。
创建基于javascript的拼音字典
之所以基于javascript，是为了获取较高的相应速度，同时减少服务端的压力。我在字典设计时有两个目标：一是查询速度要足够快；二是字典要尽量小。怎么样足够快？数组；怎样尽量小？压缩！好，让我们开始设计吧：
字典准备
找一个汉字拼音对照表，用正则表达式将这些汉字与拼音关联起来创建对象字典（为了简单，忽略了多音字）。
结果类似于 a["爱"]='ai',a['我']='wo'……
转换为数组
利用汉字具有唯一ascii码值这一特点，将汉字与拼音的对应关系转换为ascii与拼音的对应关系。javascript求中文的ascii码的函数是 charCodeAt()。比如'爱'的ascii码是29233,'我'的ascii码是25105……则可以将对象字典转换为数组字典：a [29233]='ai',a[25105]='wo'……
数组字典就完成了。转换以后，要查找爱的拼音，可以这样：a['爱'.charCodeAt()]，方便快捷吧？
压缩数组字典
我使用了三个压缩来压缩字典。
第一个压缩是减小数组空间。因为汉字的ascii值往往比较大，最小的也将近20000。所以我们可以将数组的索引往前平移，我采用的值是18000，为了确保安全，我留出了一定盈余空间。
平移后的数组字典为：a[29233-18000]='ai',a[25205-18000]='wo'……
第二个压缩是减少数据的重复。在字典的近7000个汉字中，读音的种类是较少的。将所有读音种类存到数组b内，然后在数组字典a内记录读音在b中的索引即可。
比如'ai'在b中的索引为1，则数组字典变为 a[11233]=1……
这个时候要查找'爱'的拼音，可以这样 b[a['爱'.charCodeAt()-18000]]
第三个压缩时gzip压缩，这个以后单独在另外的文章中探讨。
字典应用举例
我已经将几个应用整理到一个页面中，您可以直接观看效果演示。
应用一:汉字排序
JavaScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo@rssidea</title>
<script language="JavaScript" type="text/javascript" src="http://demo.rssidea.com/js/ChineseAscii_pack.js"></script>
<style type="text/css">
.result{
padding:5px 0;
margin-bottom:50px;
margin-top:10px;
border-bottom:1px solid #eee;
}
</style>
</head>
<body>
<div id="box">
<h3>应用一:汉字排序</h3>
<label for="sortForm">
请输入要排序的词组，用半角逗号(,)隔开。<br />
</label>
<div class="result" id="sortResult">
</div>
</div>
<script language="javascript">
var $=function(id){return document.getElementById(id)};
var sortForm=$("sortForm");
var sortBt=$("sortBt");
sortBt.onclick=function(){
var temp=sortForm.value.split(',');
$('sortResult').innerHTML=temp.sort(sortByPinYin).join(",");
}
</script>
</body>
</html>
应用二:汉字注拼音
PLAIN TEXT
JavaScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo@rssidea</title>
<scri
相关新闻>>
- 发表评论
-
- 最新评论 更多>>
