本文實例講述了JS獲取中文拼音首字母並通過拼音首字母快速查找頁面內對應中文內容的方法。分享給大家供大家參考，具體如下：
實現效果：
圖一：
圖二：
此例中輸入的中文字符串“萬萬保重”，有三個字是多音字，所以alert對話框中顯示的是多種讀音的組合；
如何實現？
如何實現通過拼音首字母快速查找頁面內的中文內容呢？
過程原理是這樣的：例如要對一些人名進行快速查找，當頁面加載完成後，對所有人名建立一個索引，生成拼音首字母與姓名的對應關係；然後監聽鍵盤事件，當用戶按下鍵盤時，根據鍵值得到按下的是哪個字母，然後遍歷索引中是否存在相同的拼音首字母；
這裡還實現了根據字母組合來查找的功能，原理是這樣的：當用戶按鍵時，我們記錄下按鍵的時間，如果兩個連續的按鍵間隔小於一秒，就認為是組合查詢，把當前按鍵值加在之前的按鍵值之後，不多說了，上代碼！
獲取拼音首字母：
var strChineseFirstPY = "";//此處收錄了375個多音字var oMultiDiff={"19969":"DZ","19975":"WM","19988":"QJ","20048":"YL","20056":"SC","20060":"NM","20094":"QG","20127":"QJ","20167":"QC","20193":"YG","20250":"KH","20256":"ZC","20282":"SC","20285":"QJG","20291":"TD","20314":"YD","20340":"NE","20375":"TD","20389":"YJ","20391":"CZ","20415":"PB","20446":"YS","20447":"SQ","20504":"TC","20608":"KG","20854":"QJ","20857":"ZC","20911":"PF","20504":"TC","20608":"KG","20854":"QJ","20857":"ZC","20911":"PF","20985":"AW","21032":"PB","21048":"XQ","21049":"SC","21089":"YS","21119":"JC","21242":"SB","21273":"SC","21305":"YP","21306":"QO","21330":"ZC","21333":"SDC","21345":"QK","21378":"CA","21397":"SC","21414":"XS","21442":"SC","21477":"JG","21480":"TD","21484":"ZS","21494":"YX","21505":"YX","21512":"HG","21523":"XH","21537":"PB","21542":"PF","21549":"KH","21571":"E","21574":"DA","21588":"TD","21589":"O","21618":"ZC","21621":"KHA","21632":"ZJ","21654":"KG","21679":"LKG","21683":"KH","21710":"A","21719":"YH","21734":"WOE","21769":"A","21780":"WN","21804":"XH","21834":"A","21899":"ZD","21903":"RN","21908":"WO","21939":"ZC","21956":"SA","21964":"YA","21970":"TD","22003":"A","22031":"JG","22040":"XS","22060":"ZC","22066":"ZC","22079":"MH","22129":"XJ","22179":"XA","22237":"NJ","22244":"TD","22280":"JQ","22300":"YH","22313":"XW","22331":"YQ","22343":"YJ","22351":"PH","22395":"DC","22412":"TD","22484":"PB","22500":"PB","22534":"ZD","22549":"DH","22561":"PB","22612":"TD","22771":"KQ","22831":"HB","22841":"JG","22855":"QJ","22865":"XQ","23013":"ML","23081":"WM","23487":"SX","23558":"QJ","23561":"YW","23586":"YW","23614":"YW","23615":"SN","23631":"PB","23646":"ZS","23663":"ZT","23673":"YG","23762":"TD","23769":"ZS","23780":"QJ","23884":"QK","24055":"XH","24113":"DC","24162":"ZC","24191":"GA","24273":"QJ","24324":"NL","24377":"TD","24378":"QJ","24439":"PF","24554":"ZS","24683":"TD","24694":"WE","24733":"LK","24925":"TN","25094":"ZG","25100":"XQ","25103":"XH","25153":"PB","25170":"PB","25179":"KG","25203":"PB","25240":"ZS","25282":"FB","25303":"NA","25324":"KG","25341":"ZY","25373":"WZ","25375":"XJ","25384":"A","25457":"A","25528":"SD","25530":"SC","25552":"TD","25774":"ZC","25874":"ZC","26044":"YW","26080":"WM","26292":"PB","26333":"PB","26355":"ZY","26366":"CZ","26397":"ZC","26399":"QJ","26415":"ZS","26451":"SB","26526":"ZC","26552":"JG","26561":"TD","26588":"JG","26597":"CZ","26629":"ZS","26638":"YL","26646":"XQ","26653":"KG","26657":"XJ","26727":"HG","26894":"ZC","26937":"ZS","26946":"ZC","26999":"KJ","27099":"KJ","27449":"YQ","27481":"XS","27542":"ZS","27663":"ZS","27748":"TS","27784":"SC","27788":"ZD","27795":"TD","27812":"O","27850":"PB","27852":"MB","27895":"SL","27898":"PL","27973":"QJ","27981":"KH","27986":"HX","27994":"XJ","28044":"YC","28065":"WG","28177":"SM","28267":"QJ","28291":"KH","28337":"ZQ","28463":"TL","28548":"DC","28601":"TD","28689":"PB","28805":"JG","28820":"QG","28846":"PB","28952":"TD","28975":"ZC","29100":"A","29325":"QJ","29575":"SL","29602":"FB","30010":"TD","30044":"CX","30058":"PF","30091":"YSP","30111":"YN","30229":"XJ","30427":"SC","30465":"SX","30631":"YQ","30655":"QJ","30684":"QJG","30707":"SD","30729":"XH","30796":"LG","30917":"PB","31074":"NM","31085":"JZ","31109":"SC","31181":"ZC","31192":"MLB","31293":"JQ","31400":"YX","31584":"YJ","31896":"ZN","31909":"ZY","31995":"XJ","32321":"PF","32327":"ZY","32418":"HG","32420":"XQ","32421":"HG","32438":"LG","32473":"GJ","32488":"TD","32521":"QJ","32527":"PB","32562":"ZSQ","32564":"JZ","32735":"ZD","32793":"PB","33071":"PF","33098":"XL","33100":"YA","33152":"PB","33261":"CX","33324":"BP","33333":"TD","33406":"YA","33426":"WM","33432":"PB","33445":"JG","33486":"ZN","33493":"TS","33507":"QJ","33540":"QJ","33544":"ZC","33564":"XQ","33617":"YT","33632":"QJ","33636":"XH","33637":"YX","33694":"WG","33705":"PF","33728":"YW","33882":"SR","34067":"WM","34074":"YW","34121":"QJ","34255":"ZC","34259":"XL","34425":"JH","34430":"XH","34485":"KH","34503":"YS","34532":"HG","34552":"XS","34558":"YE","34593":"ZL","34660":"YQ","34892":"XH","34928":"SC","34999":"QJ","35048":"PB","35059":"SC","35098":"ZC","35203":"TQ","35265":"JX","35299":"JX","35782":"SZ","35828":"YS","35830":"E","35843":"TD","35895":"YG","35977":"MH","36158":"JG","36228":"QJ","36426":"XQ","36466":"DC","36710":"JC","36711":"ZYG","36767":"PB","36866":"SK","36951":"YW","37034":"YX","37063":"XH","37218":"ZC","37325":"ZC","38063":"PB","38079":"TD","38085":"QY","38107":"DC","38116":"TD","38123":"YD","38224":"HG","38241":"XTC","38271":"ZC","38415":"YE","38426":"KH","38461":"YD","38463":"AE","38466":"PB","38477":"XJ","38518":"YT","38551":"WK","38585":"ZC","38704":"XS","38739":"LJ","38761":"GJ","38808":"SQ","39048":"JG","39049":"XJ","39052":"HG","39076":"CZ","39271":"XT","39534":"TD","39552":"TD","39584":"PB","39647":"SB","39730":"LG","39748":"TPB","40109":"ZQ","40479":"ND","40516":"HG","40536":"HG","40583":"QJ","40765":"YQ","40784":"QJ","40840":"YK","40863":"QJG"};//參數,中文字符串//返回值:拼音首字母串數組function makePy(str){if(typeof(str) != "string")throw new Error(-1,"函數makePy需要字符串類型參數!");var arrResult = new Array(); //保存中間結果的數組for(var i=0,len=str.length;i<len;i++){//獲得unicode碼var ch = str.charAt(i);//檢查該unicode碼是否在處理範圍之內,在則返回該碼對映漢字的拼音首字母,不在則調用其它函數處理arrResult.push(checkCh(ch));}//處理arrResult,返回所有可能的拼音首字母串數組return mkRslt(arrResult);}function checkCh(ch){var uni = ch.charCodeAt(0);//如果不在漢字處理範圍之內,返回原字符,也可以調用自己的處理函數if(uni > 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<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++){//複製一個相同的arrRsltvar 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}/gt=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 href="#uid23">陳曉薇</a></span> <span><a href="#uid23">張寧寧</a></span> <span><a href="#uid23">李序</a></span> <span><a href="#uid23">王昌鳳</a></span> <span><a href="#uid23">劉奇印</a></span> <span><a href="#uid23">陳志鑫</a></span> <span><a href="#uid23">黃志華</a></span> <span><a href="#uid23">高躍華</a></span> <span><a href="#uid23">李呈新</a></span> <span><a href="#uid23">趙林</a></span> <span><a href="#uid23">劉建</a></span> <span><a href="#uid23">王纓</a></span> <span><a href="#uid23">白錫康</a></span> <span><a href="#uid23">張劍波</a></span> <span><a href="#uid23">林峰</a></span></div><br /><br /><div style="font-size:14px; font-weight:bold;">通過姓名的首字母查找，保持頁面擁有焦點，連續按下字母組合，例如：想查找“黃志華”，就可以連續按下字母：HZH</div><div id="divKeyCache">篩選字母組合：</div></body>
完整實例代碼點擊此處本站下載。
更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript查找算法技巧總結》、《JavaScript遍曆算法與技巧總結》、《JavaScript傳值操作技巧總結》、《javascript編碼操作技巧總結》、《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。