|
不论是浏览器还是操作系统，对中文的支持已经有了长足的进步，但是在一些细节方面仍然存在不足。比如，在windows文件浏览时，我们可以通过按下文件夹名的首字母来快速定位文件夹，但是对于文件夹名为中文的文件夹却无能为力。类似的，在网页浏览中，也存在类似问题。这种问题不会妨碍使用，但却伤害体验。本文分两部分，第一部分简单介绍基于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压缩，这个以后单独在另外的文章中探讨。
经过这几步，简单的字典基本设计好了:字典下载（13k）。这个文件，如果用浏览器直接下载保存，是未Gzip压缩版，约40k。压缩版需要用下载工具下载，约13k。
字典应用举例
我已经将几个应用整理到一个页面中，您可以直接观看效果演示。
<input id="translateForm" type="text" size="70"/><button type="button" id="translateBt">开始注音</button>
</label>
<div class="result" id="tResult">
</div>
</div>
</div>
<script language="javascript">
var $=function(id){return document.getElementById(id)};
var tForm=$("translateForm");
var tBt=$("translateBt");
tBt.onclick=function(){
var temp=tForm.value.split(''),i=-1,len=temp.length;
while(++i<len){
temp[i]=(temp[i].charCodeAt()<1000temp[i].charCodeAt()>60000)?temp[i]:lookUpWord(temp[i]);
}
$('tResult').innerHTML=temp.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>
<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;
上一篇:不用重装XP系统就可以解决全部故障
下一篇:CSS网页布局中ID与class的理解
|
精品推荐