In diesem Artikel wird beschrieben, wie JS den ersten Buchstaben des chinesischen Pinyin erhält und den entsprechenden chinesischen Inhalt schnell durch den ersten Buchstaben des Pinyin auf der Seite findet. Teilen Sie es für Ihre Referenz wie folgt weiter:
Den Effekt erkennen:
Abbildung 1:
Abbildung 2:
Die in diesem Beispiel eingegebene chinesische Zeichenfolge "Take Care" enthält drei polyphonische Zeichen, sodass das Dialogfeld "Alarm" eine Kombination mehrerer Aussprachen zeigt.
Wie kann man es erreichen?
Wie finde ich den chinesischen Inhalt schnell auf der Seite durch den ersten Buchstaben des Pinyin?
Das Prozessprinzip lautet wie folgt: Zum Beispiel wird ein Index für alle Namen aller Personen festgelegt, um die Korrespondenz zwischen dem ersten Buchstaben des Pinyin und dem Namen zu erzeugen. Überwachen Sie dann das Tastaturereignis, wenn der Benutzer die Tastatur gemäß der Taste drückt, lohnt es sich zu sehen, welcher Buchstaben gedrückt wird, und dann iterieren Sie, ob der gleiche erste Buchstaben des Pinyin im Index vorliegt.
Hier implementieren wir auch die Funktion der Suche nach Briefkombinationen. Das Prinzip lautet wie folgt: Wenn der Benutzer die Taste drückt, zeichnen wir die Zeit der Taste auf. Wenn das Intervall zwischen zwei aufeinanderfolgenden Schlüssel weniger als eine Sekunde beträgt, wird es als Kombination angesehen. Nachdem ich den aktuellen Schlüsselwert zum vorherigen Schlüsselwert hinzugefügt habe, sage ich nicht viel, fügen Sie einfach den Code hinzu!
Holen Sie sich den ersten Buchstaben des Pinyin:
var strchinesefirstpy = ""; // Die polyphonischen Wörter 375 sind hier enthalten 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 " "," 21834 ":" a "," 21899 ":" Zd "," 21903 ":" Rn "," 21908 ":" Wo "," 21939 ":" ZC "," 21956 ":" Sa "," 21964 ":" Ya "," 21970 ":" Td "," 22003 ":" a "," 22031 ":" Jg "," 22040 ":" XS "," 22060 ": "," 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 ":" Wir ",", ",", " 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"}; // Parameter,, Chinesische Zeichenfolge // Rückgabewert: Pinyin First String Array-Funktion Makepy (str) {if (typeof (str)! // Speichern Sie das Array der Zwischenergebnisse für (var i = 0, len = str.length; i <len; i ++) {// Unicode -Code var ch = str.charat (i); // Überprüfen Sie, ob der Unicode -Code im Verarbeitungsbereich im Verarbeitungsbereich liegt, wenn es innerhalb des Pinyin -ersten Buchstabens des chinesischen Codes ist. Wenn es nicht vorhanden ist, ruft es andere Funktionen auf, um arrResult.push (checkch (ch)) zu verarbeiten;} // ARRRESULT AUSGABEN, und alle möglichen Pinyin Erstbuchstaben -String -Arrays zurückgeben. if (uni> 40869 || uni <19968) return ch; // DealWithothers (CH); // Überprüfen Sie, ob es sich um ein polyphonisches Wort handelt, es wird als polyphonisches Wort verarbeitet. Finden Sie nicht nur den entsprechenden Anfangsbrief in der StrChineSefirstpy-String (Omultidiff [uni]? Omultidiff [uni] :( strchinsefirstpy.charat (uni-19968); arrrslt = [""]; für (var i = 0, len = arr.Length; i <len; i ++) {var str = arr [i]; var strlen = str. Length; if (strlen == 1) {für (var k = 0; k <arrrslt.Length; arrrslt.slice (0); arrrslt = []; für (k = 0; k <strlen; k ++) {// das gleiche arrrsltvar tmp = tmparr.slice (0); // add den aktuellen Zeichen Str [k] zu Ende eines jeden Elements für (var j = 0; Str.Charat (k);} // Verbinden Sie das kopierte und modifizierte Array an arrrslt arrrslt = arrrslt.concat (tmp);}} arrrslt;} // Space function String entfernen } // Pinyin -Abkürzung function query () {var str = document.getElementById ("txtchinese"). Value.trim (); if (str == "") zurück; var arrrslt = makepy (str); alarm (arrrslt);}Indexierungscode:
// Wird verwendet, um die Schlüsselwertepaare des ersten Buchstabens und des ersten Buchstabens zu speichern. window.onload = function () {// alle Namen in der ID "Divname" var div = document.getElementById ("Divname") extrahieren; if (div) {var names = []; // kompatibel mit Firefox und Chrom; if (div.textContent) {// Ersetzen Sie alle Whitespace -Zeichen, einschließlich Leerzeichen, Registerkarten, Seitenunterbrechungen usw. durch Leerzeichen durch Ersetzen (// s/ig, "") .split (");} else {names = div.innertext.replace (// s/ig,") .Ssplit (");"); ");"); ");"); ");"); ");"); } für (var i = 0; i <names.length; i ++) {if (names [i]! // die Korrespondenz zwischen Pinyin und Chinesisch zum Array -Namelist.push (Neuarray (arrrslt.toString (), Namen [i]) hinzufügen; }}}}Führen Sie den Suchcode aus:
var timezoneOffset = 0; // Tastenzeit aufzeichnen var keycache = ""; // Zeichnen Sie die Buchstabenkombinationen auf, die kontinuierlich gedrückt werden // Suchen Sie, wenn der Tastaturbuchstaben dokumentiert wird. var tz = neues Datum (). GetTime (); // Berechnung der kontinuierlichen Schlüsselverzögerung, auf 1000 Millisekunden eingestellt, dh 1 Sekunde if (Tz - TimeZoneOffset> 1000) {// Die Verzögerung überschreitet eine Sekunde, die timed timezoneOffset = TZ; KeyCache = Schlüssel; } else {// Die Verzögerung liegt innerhalb von 1 Sekundenbereich, der Filterzeichenschlüssel += Schlüssel; } // Die Filterinhaltslänge var keyLength = keycache.length abrufen; var word = ""; // zeichne chinesische Wörter auf, die den Bedingungen erfüllen // den Index übertragen und eine Suche nach (var i = 0; i <namelist.length; i ++) {// Seave Die gleichen Längenzeichen und vergleichen die Filterbriefkombination if (Namelist [i] [0] .Substr (0, KeyLength) == Keycache {if (Word == "; // Die Suchergebnisse hervorheben. Das erste Ergebnis, das die Kriterien erfüllt, muss vor dem Hervorhebung gelöscht werden. Daher wird der zweite Parameter hier übergeben: True Highlight (Namelist [i] [1] .Substr (0, KeyLength), Richtig); } else {word + = "" + namelist [i] [1]; Highlight (Namelist [i] [1] .Substr (0, KeyLength), falsch); }}} // Filterbriefkombinationen in Div var div = document.getElementById ("Divkeycache") anzeigen; if (div) {div.innerhtml = "Filterbriefkombinationen:" + keycache; }}Highlight -Code:
Funktionscodierung (s) {return s.Replace (/&/g, "&"). Ersetzen (/</g, "<"). Ersetzen Sie (// g, ">"). Ersetzen (/(*//./*/$/^ cl )/ G, "// $ 1"); s.replace(//[/./*/[/]/(/$/^])/g,"$1").replace(////g,">").replace(/</g,"<").replace(/&/g,"&");}// Highlight the character specified by "s", "clear": Whether to clear the previously highlighted content function highlight(s, clear){ if (S.Length == 0) {// alert ('Suchschlüsselwort nicht ausgefüllt!'); false zurückgeben; } s = codes (s); var obj = document.getElementsByTagName ("Körper") [0]; var t = ""; if (typeof klare! 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;} Funktion LoopSearch (s, obj) {var cnt = 0; if (obj.nodetype == 3) {cnt = ersetzen (s, obj); CNT zurückgeben; } für (var i = 0, c; c = obj.childnodes [i]; i ++) {if (! c.className || c.className! } return cnt;} Funktion Ersatz (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}"+Decodode (s)+"{/searchhl}") dest.nodeValue = t; } return cnt;}Highlight -Stil:
<Style> .Highlight {Hintergrund: rot; Schriftgewicht: fett; Farbe: Weiß; Schriftgröße: 24px;} </style>HTML:
<body><form><table><td><span>Please enter the Chinese string:</span><input type="text" id="txtChinese" size="30" value="Take care"><input type="button" onclick="query()" value="View pinyin abbreviation"></td></tr></table></form><div id="divName"> <span><a href = "#uid23"> Chen xiaoWei </a> </span> <span> <a href = "#UID23"> Zhang Ningning </a> </span> <span> <a href = "#uid23"> li xu </a> </span> <a href = "#uid23" <span> <a href = "#UID23"> Wang Changfeng </a> </span> <span> <a href = "#uid23"> liu qiyin </a> </span> <span> <a href = "#uid23"> chen zhixin </a> </span> <a href = "#uid23" uid 23 " Zhihua </a> </span> <span> <a href = "#uid23"> gao yuehua </a> </span> <span> <a href = "#UID23"> li chengxin </a> </span> <a href = "#Uid23" href="#uid23">Liu Jian</a></span> <span><a href="#uid23">Wang Ying</a></span> <span><a href="#uid23">Bai Xikang</a></span> <span><a href="#uid23">Zhang Jianbo</a></span> <span> <a href = "#uid23"> lin feng </a> </span> </div> <br/> <br/> <div style = "Schriftgröße: 14px; Schriftgewicht: BOLD;"> Suchen Sie den ersten Buchstaben des Namens, fokussiert und drücken Sie die Buchstabenkombination kontinuierlich. Zum Beispiel: Wenn Sie "Huang zhihua" finden möchten, können Sie den Buchstaben kontinuierlich drücken: Hzh </div> <div id = "Divkeycache"> Filter der Buchstabenkombination: </div> </body>
Klicken Sie hier, um den vollständigen Beispielcode herunterzuladen.
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript Search Algorithm and Skills", "Summary of JavaScript Value Transfer Operation Skills", "Summary of JavaScript Encoding Operation Skills", "Summary of JSON Operation Skills in JavaScript", "Summary of JavaScript Switching Special Effects and Skills", "Summary of JavaScript Animation Special Effects and Skills", "Summary von JavaScript -Fehlern und Debugging -Fähigkeiten "," Zusammenfassung der JavaScript -Datenstrukturen und Algorithmusfähigkeiten "und" Zusammenfassung der Verwendung von JavaScript Mathematical Operation Nutzung ""
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.