この記事の例では、JSが中国のピニインの最初の文字を取得し、ピニインの最初の文字を通してページ上の中国のコンテンツをすぐに見つけた方法について説明します。次のように、参照のために共有してください。
効果を実現します：
図1：
図2：
この例で入力された中国の文字列には、ポリフォニックの3つの文字があるため、アラートダイアログボックスには複数の発音の組み合わせが表示されます。
それを達成する方法は？
Pinyinの最初の文字を通して、ページ上の中国のコンテンツをすばやく見つけるにはどうすればよいですか？
プロセスの原則は次のとおりです。たとえば、一部の人々の名前をすばやく検索するには、ページが読み込まれると、すべての人の名前がピニインの最初の文字と名前の間に通信を生成するためのインデックスが確立されます。次に、キーボードイベントを監視します。ユーザーがキーボードを押したとき、キーに従って、どの文字が押されているかを確認し、インデックスに同じ最初の文字が存在するかどうかを反復します。
ここでは、文字の組み合わせに従って検索の機能も実装します。原則は次のとおりです。ユーザーがキーを押すと、キーの時間を記録します。 2つの連続したキー間の間隔が1秒未満の場合、組み合わせクエリと見なされます。現在のキー値を以前のキー値に追加した後、コードを追加するだけではありません！
Pinyinの最初の文字を取得してください：
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 "、" 2127 3 "：" sc "、" 21305 "：" yp "、" 21306 "：" qo "、" 21330 "：" zc "、" 21333 "：" sdc "、" 21345 "：" qk "、" 21 378 "：" 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 "：" t d "、" 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 "、" 2356 1 "：" yw "、" 23586 "：" yw "、" 23614 "：" yw "、" 23615 "：" sn "、" 23631 "：" pb "、" 23646 "：" zs "、" 236 63 "：" zt "、" 23673 "：" yg "、" 23762 "：" TD "、" 23769 "：" zs "、" 23780 "：" qj "、" 23884 "：" qk "、" 24 055 "：" xh "、" 24113 "：" dc "、" 24162 "：" zc "、" 24191 "：" ga "、" 24273 "：" qj "、" 24324 "：" nl "、" 2 4377 "：" 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 "：" t d "、" 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 "、" 2799 4 "：" xj "、" 28044 "：" yc "、" 28065 "：" wg "、" 28177 "：" sm "、" 28267 "：" qj "、" 28291 "：" kh "、" 283 37 "：" zq "、" 28463 "：" TL "、" 28548 "：" dc "、" 28601 "：" TD "、" 28689 "：" pb "、" 28805 "：" jg "、" 28 820 "：" qg "、" 28846 "：" pb "、" 28952 "：" TD "、" 28975 "：" zc "、" 29100 "：" a "、" 29325 "：" qj "、" 29 575 "：" 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"： "n M "、" 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 "、" 327 93 "：" PB "、" 33071 "：" PF "、" 33098 "：" xl "、" 33100 "：" ya "、" 33152 "：" PB "、" 33261 "：" cx "、" 33 324 "：" bp "、" 33333 "：" TD "、" 33406 "：" ya "、" 33426 "：" wm "、" 33432 "：" PB "、" 33445 "：" jg "、" 3 3486 "：" 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 "：" h g "、" 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"、 "3706 3 "：" xh "、" 37218 "：" zc "、" 37325 "：" zc "、" 38063 "：" pb "、" 38079 "：" td "、" 38085 "：" qy "、" 381 07 "：" dc "、" 38116 "：" TD "、" 38123 "：" yd "、" 38224 "：" hg "、" 38241 "：" xtc "、" 38271 "：" zc "、" 3 8415 "：" 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"： "tp b "、" 40109 "：" zq "、" 40479 "：" nd "、" 40516 "：" hg "、" 40536 "：" hg "、" 40583 "：" qj " 、 "40765"： "yq"、 "40784"： "qj"、 "40840"： "yk"、 "40863"： "qjg"}; //パラメーター、中国の文字列//返品値：Pinyin First String Array関数makepy（str）{if（typeof（str）！= "string"）スローnewエラー（-1、 "function makepyには文字列型パラメーターを必要とします！"）; var arrresult = new array（）; //（var i = 0、len = str.length; i <len; i ++）{// unicodeコードvar ch = str.charat（i）; //ユニコードコードが処理範囲内であるかどうかを確認してください。そこにない場合、他の関数を呼び出してarrresult.push（checkch（ch））;} //すべてのpinyinの最初の文字列arrayを返すことを処理します。 > 40869 ||。 // dealwithothers（ch）; //それがポリフォニック語であるかどうかを確認します、それはポリフォニック語として処理され、strchinesefirstpy文字列の対応する初期文字を直接見つけるだけではありません（uni]？ = ["" "]; 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;} arrrslt.slice（0）; arrrslt = []; for（k = 0; k <strlen; k ++）{//同じarrrsltvar tmp = tmparr.slice（0）; //現在の文字str [k]を各要素の終わりに追加する（var j = 0; j <tmp. str.Charat（k）;} //コピーされたアレイをarrrslt arrrslt = arrrslt.concat（tmp）;}}}} remoting arrrslt;} // removy space cring.prototype.trim = function（）{return this.replace（/s*）|（^/s*）; } // pinyin略語関数query（）{var str = document.getElementbyId（ "txtchinese"）。value.trim（）; if（str == ""）return; var arrrslt = makepy（str）;アラート（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）{//スペース、タブ、ページブレイクなどを含むすべてのホワイトスペース文字を置き換えます。 } for（var i = 0; i <names.length; i ++）{if（names [i]！= ""）{// pinyin略語var arrrslt = makepy（names [i]）; // pinyinと中国語の間の対応を配列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秒の場合（tz -timezoneoffset> 1000）{//遅延は1秒を超え、timzoneoffset = tz; keycache = key; } else {//遅延は1秒の範囲内で、フィルター文字keycache += key; } //フィルターコンテンツの長さを取得するvar keylength = keycache.length; var word = ""; //条件を満たす中国語の単語を記録します//インデックスを転送し、検索を実行します（var i = 0; i <nameList.length; i ++）{//等しい長さの文字をSeaveし、if（nameList [0] .substr（0、keylength）== keycache）{if（word = = "" "）{if+= nameList [i]; //検索結果を強調表示します。基準を満たす最初の結果は、ハイライトの前にクリアする必要があるため、ここで2番目のパラメーターは次のように渡されます（namelist [i] [1] .substr（0、keylength）、true）。 } else {word + = "" + nameList [i] [1];ハイライト（nameList [i] [1] .substr（0、keylength）、false）; }}} // div var div = document.getElementbyId（ "sibkeycache"）のフィルター文字の組み合わせを表示します; if（div）{div.innerhtml = "フィルター文字の組み合わせ：" + keycache; }}ハイライトコード：
関数エンコード（s）{return s.replace（/＆/g、 "＆"）。置換（/</g、 "<"）。置き換え（// g、 ">"） s.Replace（// [/././/]/（/$/^]/G、 "$ 1"）。置き換え（/// g、g、 ">"）。置き換え（/</g、 "<"）。（/＆/g、 "＆"）;} （s.length == 0）{// alert（ 'キーワードを検索しない！'）; 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.? 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;}関数loopsearch（s、obj）{var cnt = 0; if（obj.nodeType == 3）{cnt = falpleas（s、obj）; CNTを返します。 } for（var i = 0、c; c = obj.childnodes [i]; i ++）{if（！c.className || c.className！= "highlight"）cnt+= loopsearch（s、c）; } return cnt;}関数置換（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; } cnt;}ハイライトスタイル：
<style> .highlight {background：red; font-weight：bold; color：white; font-size：24px;} </style>HTML：
<body> <form> <table> <td> <span>中国の文字列を入力してください：</span> <入力タイプ= "text" id "txtchinese" size = "30" "value =" take care "> <入力タイプ="ボタン "onclick =" query（） "query =" view pinyin abbreviation "> </td> </</</</</< href = "＃uid23"> chen xiaowei </a> </span> <span> <a href = "＃uid23"> zhang ningning </a> </span> <span> <a href = "＃uid23"> li xu </a> </span> <span> <a href = "＃uid23"> wang changfeng </a> </span> <span> <a href = "＃uid23"> liu qiyin </span> <span> <a href = "＃uid23"> chen zhixin </a> Zhihua </a> </span> <span> <a href = "＃uid23"> gao yuehua </a> </span> <span> <a href = "＃uid23"> li chengxin </a> </span> <span> <a href = " href = "＃uid23"> liu jian </a> </span> <span> <a href = "＃uid23"> wang ying </a> </span> <span> <a href = "＃uid23" <span> <a href = "＃uid23"> lin feng </a> </span> </div> <br/> <br/> <div style = "font-size：14px; font-weight：bold;">名前の最初の文字を検索し、ページに焦点を合わせ、文字の組み合わせを継続的に押します。たとえば、「Huang Zhihua」を見つけたい場合は、文字を継続的に押すことができます。HZH</div> <div id = "sibkeycache">文字の組み合わせ：</div> </body>
完全なサンプルコードをダウンロードするには、ここをクリックしてください。
JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScript検索アルゴリズムとスキルの要約」、「JavaScript値転送操作スキルの要約」、「JavaScriptエンコード操作スキルの要約」、JavascriptのJSONオペレーションスキルの要約」、「JavaScriptの概要」の概要を確認してください。 JavaScriptエラーとデバッグスキルの "、「JavaScriptデータ構造とアルゴリズムスキルの要約」および「JavaScriptの概要数学的操作の使用法」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。