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

Javascript
JavaScript中全局变量、函数内变量以及常量表达式的效率测试
写出更好的JavaScript之undefined篇（上）
Javascript 刷新全集常用代码
传智播客学习之java 反射
javascript DOM编程实例(智播客学习)
javascript 在网页中的运用(asp.net)
通过身份证号得到出生日期和性别的js代码
写出更好的JavaScript程序之undefined篇（中）
js获取图片长和宽度的代码
js cookies实现简单统计访问次数
根据鼠标的位置动态的控制层的位置
dropdownlist之间的互相联动实现（显示与隐藏）
javascript select控件间内容互相移动
asp.net下利用js实现返回上一页的实现方法小集
JavaScript 利用StringBuffer类提升+=拼接字符串效率
JS 实现双色表格实现代码
利用JavaScript更改input中radio和checkbox样式
jquery.ui.draggable中文文档
js loading加载效果实现代码
JS 倒计时实现代码(时、分，秒)

No. « 240 241 242 243 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-28   浏览: 372 ::
收藏到网摘: 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/