JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】

本文实例讲述了JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法。分享给大家供大家参考,具体如下:

实现效果:

图一:

图二:

此例中输入的中文字符串“万万保重”,有三个字是多音字,所以alert对话框中显示的是多种读音的组合;

如何实现?

如何实现通过拼音首字母快速查找页面内的中文内容呢?

过程原理是这样的:例如要对一些人名进行快速查找,当页面加载完成后,对所有人名建立一个索引,生成拼音首字母与姓名的对应关系;然后监听键盘事件,当用户按下键盘时,根据键值得到按下的是哪个字母,然后遍历索引中是否存在相同的拼音首字母;

这里还实现了根据字母组合来查找的功能,原理是这样的:当用户按键时,我们记录下按键的时间,如果两个连续的按键间隔小于一秒,就认为是组合查询,把当前按键值加在之前的按键值之后,不多说了,上代码!

获取拼音首字母:

40869 || uni < 19968) return ch; //dealWithOthers(ch); //检查是否是多音字,是按多音字处理,不是就直接在strChineseFirstPY字符串中找对应的首字母 return (oMultiDiff[uni]?oMultiDiff[uni]:(strChineseFirstPY.charAt(uni-19968))); } function mkRslt(arr){ var arrRslt = [""]; for(var i=0,len=arr.length;i

建立索引代码:

执行查找代码:

1000){ //延迟超过一秒,则重新计时 timezoneOffset = tz; keyCache = key; }else{ //延迟在1秒范围内,则累加筛选字符 keyCache += key; } //获取筛选内容长度 var keyLength = keyCache.length; var word = ""; //记录符合条件的中文字词 //遍历索引,执行查找 for (var i = 0; i < nameList.length; i++){ //截取等长字符与筛选字母组合进行比较 if (nameList[i][0].substr(0,keyLength) == keyCache){ if (word == ""){ word += nameList[i][1]; //对查找结果高亮显示,第一个符合条件的结果要清除之前的高亮显示,所以这里第二个参数传递为:true highlight(nameList[i][1].substr(0,keyLength),true); }else{ word += " " + nameList[i][1]; highlight(nameList[i][1].substr(0,false); } } } //在div中显示筛选字母组合 var div = document.getElementById("divKeyCache"); if (div){ div.innerHTML = "筛选字母组合:" + keyCache; } }

高亮显示代码:

/g,">").replace(/([\\\.\* \$\^])/g,"\\$1"); } function decode(s){ return s.replace(/\[\.\*\[\]\(\$\^])/g,"$1").replace(/>/g,">").replace(/([^<>]*)<\/span>/gi,"$1"); obj.innerHTML=t; } var cnt=loopSearch(s,obj); t=obj.innerHTML var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g t=t.replace(r,"$1"); obj.innerHTML=t; } function loopSearch(s,obj){ var cnt=0; if (obj.nodeType==3){ cnt=replace(s,obj); return cnt; } for (var i=0,c;c=obj.childNodes[i];i++){ if (!c.className||c.className!="highlight") cnt+=loopSearch(s,c); } return cnt; } function replace(s,dest){ var r=new RegExp(s,"g"); var tm=null; var t=dest.nodeValue; var cnt=0; if (tm=t.match(r)){ cnt=tm.length; t=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}") dest.nodeValue=t; } return cnt; }

高亮样式:

.highlight{background:red;font-weight:bold;color:white; font-size:24px;}

HTML:

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)