Cet exemple d'article décrit comment JS obtient la première lettre de pinyin chinois et trouve rapidement le contenu chinois correspondant sur la page à travers la première lettre du pinyin. Partagez-le pour votre référence, comme suit:
Réalisez l'effet:
Figure 1:
Figure 2:
La chaîne chinoise "prendre soin" entrée dans cet exemple a trois caractères polyphoniques, donc la boîte de dialogue d'alerte montre une combinaison de plusieurs prononciations;
Comment y parvenir?
Comment trouver rapidement le contenu chinois sur la page à travers la première lettre du pinyin?
Le principe du processus est le suivant: par exemple, pour rechercher rapidement les noms de certaines personnes, lorsque la page est chargée, un index est établi pour que tous les noms de tous les gens générent la correspondance entre la première lettre du Pinyin et le nom; Surveillez ensuite l'événement du clavier, lorsque l'utilisateur appuie sur le clavier, selon la touche, il vaut la peine de voir quelle lettre est enfoncée, puis de savoir si la même première lettre du pinyin existe dans l'index;
Ici, nous implémentons également la fonction de la recherche en fonction des combinaisons de lettres. Le principe est le suivant: Lorsque l'utilisateur appuie sur la touche, nous enregistrons l'heure de la touche. Si l'intervalle entre deux clés consécutives est inférieure à une seconde, il est considéré comme une requête combinée. Après avoir ajouté la valeur de clé actuelle à la valeur de clé précédente, je ne dirai pas grand-chose, ajoutez simplement le code!
Obtenez la première lettre du pinyin:
var strChineseFirstpy = ""; // Les 375 mots polyphoniques var sont inclus ici Omultiff = {"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 ":" malheur "," 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 ". 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"}; // paramètres, String chinois // Valeur de retour: PinyIn Première fonction de tableau de chaîne Makepy (str) {if (typeof (str)! = "String") Throw New Error (-1, "Fonction makepy nécessite des paramètres de type de chaîne!"); Var arRresult = new Array (); // Enregistrez le tableau des résultats intermédiaires pour (var i = 0, len = str.length; i <len; i ++) {// obtenir le code unicode var ch = str.charat (i); // vérifie si le code Unicode se trouve dans la plage de traitement, s'il se trouve à l'intérieur, il renvoie la première lettre de la pinyine du code chinois. S'il n'est pas là, il appelle d'autres fonctions pour traiter arRresult.push (checkch (ch));} // traitement arrResult, renvoyer toutes les tableaux de chaîne de première lettre possibles possibles mkrslt (arrresult);} fonction vérifiech (ch) {var Uni = ch.charcodeat (0); // si elle n'est pas dans la gamme de traitement chinois et renvoie le caractère original de la fonction d'origine le caractère original. 40869 || Uni <19968) RETOUR CH; // Dealwithothers (CH); // Vérifiez s'il s'agit d'un mot polyphonique, il est traité comme un mot polyphonique, pas seulement la lettre initiale correspondante dans la chaîne strChineseFirstpy directement (Omultidiff [Uni]? Omultiff [Uni] :( StrchineseFirstpy.Charat (Uni-1968)); [""]; pour (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 = []; pour (k = 0; k <strlen; k ++) {// copier le même arrrsltvar tmp = tmparr.slice (0); // ajouter le caractère actuel str [k] à l'extrémité de chaque élément pour (var j = 0; j <tmp.Legth; str.charat (k);} // Connectez le tableau copié et modifié à Arrrslt ArrrSlt = Arrrslt.Concat (tmp);}}} return arrrslt;} // supprimer l'espace fonction string.prototype.trim = function () {return this.replace (/ (^ / s *) | (/ s * $) / g, ""); } // Afficher la fonction Abréviation Pinyin Query () {var str = document.getElementById ("txtChinese"). Value.trim (); if (str == "") return; var arrrSlt = makepy (str); alerte (Arrrslt);}Code d'indexation:
// Utilisé pour enregistrer les paires de valeurs clés de la première lettre et name var namelist = new Array (); // Lorsque la page est chargée, initialisez "Namelist". window.onload = function () {// Extraire tous les noms dans l'ID "Divname" var div = document.getElementById ("divname"); if (div) {var noms = []; // compatible avec Firefox et Chrome; if (div.textContent) {// Remplacez tous les caractères des espaces blancs, y compris les espaces, les onglets, les pauses de page, etc. par des espaces via Remplacement (// s / ig, "") .split (");} else {noms = div.innertext.replace (// s / ig," ") .split (" ");); } pour (var i = 0; i <names.length; i ++) {if (names [i]! = "") {// Obtenez l'abréviation de pinyin var arrrSlt = makepy (noms [i]); // Ajouter la correspondance entre pinyin et chinois au tableau namelist.push (nouveau tableau (ArrrSlt.ToString (), noms [i])); }}}}Exécuter le code de recherche:
var timezoneoffset = 0; // Enregistrer le temps de clé var keycache = ""; // Enregistrez les combinaisons de lettres qui sont appuyées en continu // Recherchez lorsque la lettre du clavier est appuyée sur document.onkeydown = fonction (événement) {// Obtenez la lettre réelle appuyée par "event.KeyCode" var key = string.fromCharcode (event.KeyCode); var tz = new Date (). getTime (); // Calcul de retard de clé continu, réglé sur 1000 millisecondes, c'est-à-dire 1 seconde if (tz - timezoneoffset> 1000) {// Le retard dépasse une seconde, re-timedzoneoffset = tz; keyCache = key; } else {// Le retard est dans une plage de 1 seconde, le caractère filtrant keyCache + = key; } // Obtenez la longueur du contenu du filtre var keyLength = keycache.length; var word = ""; // enregistre les mots chinois qui remplissent les conditions // transférer l'index et effectuer une recherche de (var i = 0; i <namelist.length; i ++) {// Seneve les caractères de longueur égale et comparer la combinaison de lettres de filtre if (namelist [i] [0] .substr (0, keyLength) == keycache) {if (word == "") {word + = namellist [i] [1]; // met en surbrillance les résultats de la recherche. Le premier résultat qui répond aux critères doit être effacé avant la mise en évidence, de sorte que le deuxième paramètre ici est passé comme: True Highlight (Namelist [i] [1] .substr (0, keylength), true); } else {word + = "" + namelist [i] [1]; Highlight (namelist [i] [1] .substr (0, keyLength), false); }}} // Afficher les combinaisons de lettres de filtre dans div var div = document.getElementById ("divkeyycache"); if (div) {div.innerhtml = "combinaisons de lettres de filtre:" + keyCache; }}Code de mise en évidence:
Fonction Encode (S) {return s.replace (/ & / g, "&"). Remplace (/ </ g, "<"). Remplace (// g, ">"). Remplace (/(@///./*/$/^ S.Replace (//-- // alert («Mot-clé de recherche non rempli!»); retourne false; } s = encoder (s); var obj = document.getElementsByTagName ("Body") [0]; var t = ""; if (typeof clear! = 'undefined' && clear) {// effacer le contenu précédemment mis en surbrillance 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;} fonction LoopSearch (s, obj) {var cnt = 0; if (obj.nodeType == 3) {cnt = remplacer (s, obj); retour cnt; } pour (var i = 0, c; c = obj.childNodes [i]; i ++) {if (! c.className || c.classname! = "Highlight") cnt + = lOOPSEarch (s, c); } return CNT;} fonction remplace (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 de surbrillance:
<style> .highlight {Background: Red; Font-Weight: Bold; Couleur: blanc; taille de police: 24px;} </ style>HTML:
<body> <form> <ballage> <td> <span> Veuillez saisir la chaîne chinoise: </span> <entrée type = "text" id = "txtchinese" size = "30" value = "Take Care"> <entrée type = "Button" OnClick = "Query ()" value = "View Pinyin Abreviation"> </td> </tr> </ Table> </cable> href = "# uid23"> Chen xiaowei </a> </span> <span> <a href = "# uid23"> zhang ningning </a> </span> <span> <a href = "# uid23"> li xu </a> </span> <pander> <a href = "# uid23"> li xu </aa> <pander> <span> <a href = "# uid23"> wang changfeng </a> </span> <span> <a href = "# uid23"> liu qiyin </a> </span> <span> <a href = "# uid23"> Chen zhixin </a> </span> <span> <a href = "# uid23"> huig Zhihua </a> </span> <span> <a href = "# uid23"> gao yuehua </a> </span> <span> <a href = "# uid23"> li chengxin </a> </span> <span> <a href = "# uid23 "> zhao lin </a> 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 jianbobo <span> <a href = "# uid23"> lin feng </a> </span> </div> <br /> <br /> <div style = "font-size: 14px; font-weight: bold;"> recherchez la première lettre du nom, gardez la page focalisée et appuyez sur la combinaison de lettres en continu. Par exemple: si vous souhaitez trouver "Huang Zhihua", vous pouvez appuyer en continu la lettre: hzh </div> <div id = "Divkeycache"> Filtrez la combinaison de lettres: </v> </odyfor>
Cliquez ici pour télécharger l'exemple complet du code.
Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé de l'algorithme de recherche JavaScript et des compétences", "Résumé des compétences de l'opération de transfert de valeur JavaScript", "Résumé de JavaScript Encoding Skills Skills", "Résumé des effets spéciaux JSON" Javascript ", Summary of Javascript Special Effects and Skills" Animscrip des erreurs JavaScript et des compétences de débogage "," Résumé des structures de données JavaScript et des compétences en algorithmes "et" Résumé de l'utilisation de l'opération mathématique JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.