当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 基于javascript的拼音字典及应用举例

Javascript
ExtJs 3.1 XmlTreeLoader Example Error
JQuery 获得绝对,相对位置的坐标方法
JQUERY操作JSON实例代码
基于Jquery的简单&简陋Tabs插件代码
jQuery插件 tabBox实现代码
JavaScript Event学习第十章 一些可替换的事件对
JavaScript Event学习第十一章 按键的检测
一段实现页面上的图片延时加载的js代码
我遇到的参数传递中 双引号单引号嵌套问题
Extjs学习过程中新手容易碰到的低级错误积累
JavaScript 输入框内容格式验证代码
JavaScript Event学习补遗 addEventSimple
jquery实现的提示浮层跟随鼠标移动
jQuery 添加/移除CSS类实现代码
jQuery 改变CSS样式基础代码
改善你的jQuery的25个步骤 千倍级效率提升
jquery 问答知识整理
Jquery iframe内部出滚动条
不同浏览器对回车提交表单的处理办法
Javascript 浏览器事件小结

No. « 286 287 288 289 »

技术文章搜索

关键字

Javascript 中的 基于javascript的拼音字典及应用举例

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-28   浏览: 125 ::
收藏到网摘: n/a

不论是浏览器还是操作系统，对中文的支持已经有了长足的进步，但是在一些细节方面仍然存在不足。比如，在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压缩，这个以后单独在另外的文章中探讨。

经过这几步，简单的字典基本设计好了:字典下载（13k）。这个文件，如果用浏览器直接下载保存，是未Gzip压缩版，约40k。压缩版需要用下载工具下载，约13k。

字典应用举例
我已经将几个应用整理到一个页面中，您可以直接观看效果演示。

应用一:汉字排序


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;
    margin-top:10px;
    border-bottom:1px solid #eee;
}
</style>
</head>
<body>
<div id="box">
<h3>应用一:汉字排序</h3>
<label for="sortForm">
请输入要排序的词组，用半角逗号(,)隔开。<br />
 
<input id="sortForm" type="text" size="70"/><button type="button" id="sortBt">开始排序</button>
</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>
<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="translateForm">
请输入需要标注拼音的词语或句子。<br />
<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()<1000||temp[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;
    margin-top:10px;
    border-bottom:1px solid #eee;
}
</style>
</head>
<body>
<div id="box">
<h3>应用三:关键词筛选</h3>
<label for="filterForm">
请输入字母筛选关键词<br />
<input id="filterForm" type="text" size="70"/>
</label>
<div class="result" id="filterResult">
北京市　天津市　河北省　山西省　内蒙古自治区
 辽宁省　吉林省　黑龙江省
 上海市　江苏省　浙江省　安徽省　福建省　江西省　山东省
 河南省　湖北省　湖南省　广东省　广西壮族自治区　海南省
 重庆市　四川省　贵州省　云南省　西藏自治区
 陕西省 甘肃省　青海省 宁夏回族自治区 新疆维吾尔自治区
 香港特别行政区　澳门特别行政区　台湾省
</div>
</div>
<script language="javascript">
var $=function(id){return document.getElementById(id)};
var keyword=$('filterResult').innerHTML.match(/[^\s　]+/gi);
var j=0,oriStr=',';
var keywordObj=[];
while(keyword[j]){
    var temp=keyword[j].split('');
    var i=-1,len=temp.length;
    while(++i<len){
        temp[i]=(temp[i].charCodeAt()<1000||temp[i].charCodeAt()>60000)?temp[i]:lookUpWord(temp[i]);
    }
    var str=temp.join(""); 
    keywordObj[str]={};
    keywordObj[str].ori=keyword[j];
    oriStr+=str+',';
    j++;
}
$('filterForm').onkeyup=function(){
    //alert(this.value);
    var re=new RegExp("\\b"+this.value+"[^,]+",'g');
    var temp=oriStr.match(re,'gi');
    if(!temp){
        $("filterResult").innerHTML="没有匹配项。";
        return false;
    }
    var j=0;
    while(temp[j]){
        temp[j]=keywordObj[temp[j]].ori;
        j++;
    }
    $("filterResult").innerHTML=temp.join(" ");
}
</script>
</body>
</html>

你能想到哪些基于拼音字典的应用，也请引用本文分享下吧。

原文出处:http://canque.rssidea.com/apps_about_dictionary_base_on_javascript/