JS获取中文拼音首字母，并通过拼音首字母高速查找页面内的中文内容

Posted 2020-09-29 zhchoutai

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS获取中文拼音首字母，并通过拼音首字母高速查找页面内的中文内容相关的知识，希望对你有一定的参考价值。

实现效果：

图一：

技术分享

图二：

技术分享

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

怎样实现？

怎样实现通过拼音首字母高速查找页面内的中文内容呢？

过程原理是这种：比如要对一些人名进行高速查找，当页面载入完毕后，对全部人名建立一个索引，生成拼音首字母与姓名的相应关系。然后监听键盘事件，当用户按下键盘时，依据键值得到按下的是哪个字母，然后遍历索引中是否存在同样的拼音首字母。

这里还实现了依据字母组合来查找的功能，原理是这种：当用户按键时，我们记录下按键的时间，假设两个连续的按键间隔小于一秒，就觉得是组合查询。把当前按键值加在之前的按键值之后，不多说了，上代码！

获取拼音首字母：

oMultiDiff[uni]:(strChineseFirstPY.charAt(uni-19968))); } function mkRslt(arr){ var arrRslt = [""]; for(var i=0,len=arr.length;i<len;i++){ var str = arr[i]; var strlen = str.length; if(strlen == 1){ for(var k=0;k<arrRslt.length;k++){ arrRslt[k] += str; } }else{ var tmpArr = arrRslt.slice(0); arrRslt = []; for(k=0;k<strlen;k++){ //复制一个同样的arrRslt var tmp = tmpArr.slice(0); //把当前字符str[k]加入到每一个元素末尾 for(var j=0;j<tmp.length;j++){ tmp[j] += str.charAt(k); } //把复制并改动后的数组连接到arrRslt上 arrRslt = arrRslt.concat(tmp); } } } return arrRslt; } //两端去空格函数 String.prototype.trim = function() { return this.replace(/(^\s*)|(\s*$)/g,""); } //查看拼音首字母缩写 function query(){ var str = document.getElementById("txtChinese").value.trim(); if(str == "") return; var arrRslt = makePy(str); alert(arrRslt); }

建立索引代码：

//用于保存姓名首字母与姓名的键值对
var nameList = new Array();
//当页面载入完毕后，初始化“nameList”。

window.onload = function(){
	//提取ID为“divName”中的全部姓名
	var div = document.getElementById("divName");
	if (div){
		var names = [];
		//兼容Firefox与Chrome。
		if (div.textContent){
			//通过replace(/\s/ig," ")将全部空白字符，包含空格、制表符、换页符等等都替换为空格
			names = div.textContent.replace(/\s/ig," ").split(" ");
		}else{
			names = div.innerText.replace(/\s/ig," ").split(" ");
		}
		for (var i = 0; i < names.length; i++){
			if (names[i] != ""){
				//获取拼音首字母缩写
				var arrRslt = makePy(names[i]);
				//将拼音与中文的相应关系加入到数组中
				nameList.push(new Array(arrRslt.toString(), names[i]));
			}
		}
	}
}

运行查找代码：

var timezoneOffset = 0; //记录按键时间
var keyCache = ""; //记录连续按下的字母组合

//当按下键盘字母时进行搜索
document.onkeydown = function(event){
	//通过“event.keyCode”得到按下的实际字母
	var key = String.fromCharCode(event.keyCode);
	var tz = new Date().getTime();
	//连续按键延迟计算，这里设置为1000毫秒。即1秒
	if (tz - timezoneOffset > 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, keyLength), false);
			}
		}
	}
	//在div中显示筛选字母组合
	var div = document.getElementById("divKeyCache");
	if (div){
		div.innerhtml = "筛选字母组合：" + keyCache;
	}
}

高亮显示代码：

function encode(s){
  return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/([\\\.\*\[\]\(\)\$\^])/g,"\\$1");
}
function decode(s){
  return s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g,"$1").replace(/>/g,">").replace(/</g,"<").replace(/&/g,"&");
}
//高亮显示“s”指定的字符。“clear”：是否清除之前高亮显示的内容
function highlight(s, clear){
  if (s.length==0){
    //alert(‘搜索关键词未填写！
‘);
    return false;
  }
  s=encode(s);
  var obj=document.getElementsByTagName("body")[0];
  var t = "";
  if (typeof clear != ‘undefined‘ && clear){
	//清除之前高亮显示的内容
	t=obj.innerHTML.replace(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi,"$1");
	obj.innerHTML=t;
  }
  var cnt=loopSearch(s,obj);
  t=obj.innerHTML
  var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g
  t=t.replace(r,"<span class=‘highlight‘>$1</span>");
  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;
}

高亮样式：

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

HTML：

<body>
<form>
<table>
<td><span>请输入中文字符串:</span><input type="text" id="txtChinese" size="30" value="万万保重">
<input type="button" onclick="query()" value="查看拼音首字母缩写">
</td>
</tr>
</table>
</form>
<div id="divName">
        <span><a class="kb-uname-idx" href="#uid23">陈晓薇</a></span>
		<span><a class="kb-uname-idx" href="#uid23">张宁宁</a></span>
		<span><a class="kb-uname-idx" href="#uid23">李序</a></span>
		<span><a class="kb-uname-idx" href="#uid23">王昌凤</a></span>
		<span><a class="kb-uname-idx" href="#uid23">刘奇印</a></span>
		<span><a class="kb-uname-idx" href="#uid23">陈志鑫</a></span>
		<span><a class="kb-uname-idx" href="#uid23">黄志华</a></span>
		<span><a class="kb-uname-idx" href="#uid23">高跃华</a></span>
		<span><a class="kb-uname-idx" href="#uid23">李呈新</a></span>
		<span><a class="kb-uname-idx" href="#uid23">赵林</a></span>
		<span><a class="kb-uname-idx" href="#uid23">刘建</a></span>
		<span><a class="kb-uname-idx" href="#uid23">王缨</a></span>
		<span><a class="kb-uname-idx" href="#uid23">白锡康</a></span>
		<span><a class="kb-uname-idx" href="#uid23">张剑波</a></span>
		<span><a class="kb-uname-idx" href="#uid23">林峰</a></span>
</div>
<br />
<br />
<div style="font-size:14px; font-weight:bold;">通过姓名的首字母查找，保持页面拥有焦点，连续按下字母组合。比如：想查找“黄志华”，就能够连续按下字母：HZH</div>
<div id="divKeyCache">筛选字母组合：</div>
</body>

源代码下载：http://download.csdn.net/detail/testcs_dn/7302851

以上是关于JS获取中文拼音首字母，并通过拼音首字母高速查找页面内的中文内容的主要内容，如果未能解决你的问题，请参考以下文章

JS获取中文拼音首字母，并通过拼音首字母快速查找页面内的中文内容

在js中如何实现自动获取汉字的五笔首字母？

js中如何根据汉字生成拼音首字母

JS实现获取汉字首字母拼音全拼音及混拼音的方法

js汉语转拼音（全拼首字母拼音首字母）

java怎么根据汉字获取字的拼音首字母