Este ejemplo de artículo describe cómo JS obtiene la primera letra de pinyin chino y rápidamente encuentra el contenido chino correspondiente en la página a través de la primera letra del pinyin. Compártelo para su referencia, como sigue:
Darse cuenta del efecto:
Figura 1:
Figura 2:
La cadena china "AGUA" ingresada en este ejemplo tiene tres caracteres que son polifónicos, por lo que el cuadro de diálogo de alerta muestra una combinación de pronunciaciones múltiples;
¿Cómo lograrlo?
¿Cómo encontrar rápidamente el contenido chino en la página a través de la primera letra del pinyin?
El principio del proceso es el siguiente: por ejemplo, para buscar rápidamente los nombres de algunas personas, cuando la página está cargada, se establece un índice para que los nombres de todas las personas generen la correspondencia entre la primera letra del pinyin y el nombre; Luego monitoree el evento del teclado, cuando el usuario presiona el teclado, de acuerdo con la tecla, vale la pena ver qué letra se presiona, y luego itera sobre si existe la misma primera letra del pinyin en el índice;
Aquí también implementamos la función de buscar de acuerdo con las combinaciones de cartas. El principio es el siguiente: cuando el usuario presiona la tecla, registramos la hora de la tecla. Si el intervalo entre dos claves consecutivas es inferior a un segundo, se considera una consulta de combinación. Después de agregar el valor de clave actual al valor de clave anterior, no diré mucho, ¡solo agregue el código!
Obtenga la primera letra de Pinyin:
var strchineseFirstpy = ""; // Las 375 palabras polifónicas var se incluyen aquí 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 ":" AHO "," 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 ":" nosotros ",", ",", " 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 "," 333333 ":" 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 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"}; // Parámetros, Cadena china // Valor de retorno: Pinyin First String Array Función MAKEPY (str) {if (typeof (str)! = "String") Throw New Error (-1, "Function Makepy requiere parámetros de tipo de cadena!"); Var arresult = new array (); // Guardar la matriz de resultados intermedios para (var i = 0, len = str.length; i <len; i ++) {// Obtener código unicode var ch = str.charat (i); // verifique si el código unicode está dentro del rango de procesamiento, si está dentro, devuelve la primera letra pinyin del código que es el carácter chino. Si no está allí, llama a otras funciones a procesar arrresult.push (checkch (ch));} // procesar arrresult, devolviendo todas las matrices de cadena de primera letra de pinyin. > 40869 || // Dealwithoters (CH); // Compruebe si es una palabra polifónica, se procesa como una palabra polifónica, no solo encuentre la letra inicial correspondiente en la cadena StrChinesSeSeFirstpy directamente (OMULTIDIFF [uni]? OMULTIDIFF [uni] :( StrchineSeFirstpy.Charat (uni-1968)); ["] arrrslt.slice (0); arrrslt = []; for (k = 0; k <strlen; k ++) {// copia el mismo arrrsltvar tmp = tmParr.slice (0); // agregue el carácter actual [k] al final de cada elemento (var j = 0; j <tmp.length; j ++) {tmp [tmp [ str.charat (k);} // Conecte la matriz copiada y modificada a arrrslt arrrslt = arrrslt.concat (tmp);}}} return arrrsslt;} // eliminar la función de espacio string.prototype.trim = function () {return this.replace (/(^/s*) | (/s*$)/g, ""); } // Ver la función de abreviatura de Pinyin Query () {var str = document.getElementById ("txtChinese"). Value.trim (); if (str == "") return; var arrrsslt = makepy (str); alerta (arrrslt);}Código de indexación:
// se usa para guardar los pares de valor clave de la primera letra y el nombre var namelist = new Array (); // Cuando la página está cargada, inicialice "Namelist". Window.Onload = function () {// Extraiga todos los nombres en la id "Divname" var div = document.getElementById ("Divname"); if (div) {var nombres = []; // compatible con Firefox y Chrome; if (div.TextContent) {// Reemplace todos los caracteres blancos, incluidos espacios, pestañas, pausas de página, etc. con espacios a través de reemplazo (// s/ig, "") .split (");} else {nombres = div.innertext.replace (// s/ig," ") .split ("); ");"); ");"); ");"); ");"); ");"); ");"); ");"); ");"); ");"); ");"); ");"); ");"); ");"); ");"); ");"); } for (var i = 0; i <names.length; i ++) {if (nombres [i]! = "") {// Obtener la abreviatura de Pinyin var arrrsslt = makepy (nombres [i]); // Agregar la correspondencia entre pinyin y chino a la matriz namelist.push (nueva matriz (arrrslt.toString (), nombres [i])); }}}}Ejecutar el código de búsqueda:
var TimeZoneOffset = 0; // Registro de tiempo de tecla var keyCache = ""; // Registre las combinaciones de letras que se presionan continuamente // Búsqueda cuando la letra del teclado se presiona document.OnKeydown = function (event) {// Obtenga la letra real presionada por "Event.KeyCode" var key = stromCharCode (event.keycode); var tz = new Date (). GetTime (); // Cálculo de retraso de clave continua, establecido en 1000 milisegundos, es decir, 1 segundo if (tz - timeZoneOffset> 1000) {// El retraso excede un segundo, Timed TimeloneOffset = tz; keyCache = Key; } else {// El retraso está dentro de 1 segundo rango, el carácter de filtro KeyCache += Key; } // Obtener la longitud del contenido del filtro var keyLength = keyCache.length; var word = ""; // registra palabras chinas que cumplan con las condiciones // transferir el índice y realizar una búsqueda de (var i = 0; i <namelist.length; i ++) {// seaVe los caracteres de igual longitud y comparar la combinación de filtro if (namelist [i] [0] .substr (0, keylength) == keyCache) {if (word == ") // resaltar los resultados de búsqueda. El primer resultado que cumple con los criterios debe eliminarse antes del resaltado, por lo que el segundo parámetro aquí se pasa como: verdadero resaltado (namelist [i] [1] .substr (0, keylength), true); } else {word + = "" + namelist [i] [1]; destacado (namelist [i] [1] .substr (0, keylength), falso); }}} // Mostrar combinaciones de letras de filtro en div var div = document.getElementById ("DivkeyCache"); if (div) {div.innerhtml = "combinaciones de letras de filtro:" + keyCache; }}Código destacado:
Función ENCODE (S) {return s.replace (/&/g, "&"). reemplazar (/</g, "<"). reemplazar (// g, ">"). reemplazar (/( espacio s.replace (//che/./*/§/(/$/^font>/ g, "$ 1"). reemplazar (//// g, ">"). reemplazar (/</g, "<"). reemplazar (///g, "&");} // resaltar el caracteres especificado por "s", "claro": si se aclara la función de contenido previamente destacada (s, s, clara) {if (clear) {{if (clear) // alerta ('¡La palabra clave de búsqueda no llena!'); devolver falso; } s = encoder (s); var obj = document.getElementsByTagName ("Body") [0]; var t = ""; if (typeOf Clear! = 'Undefined' && Clear) {// Clear el contenido destacado t = obj.innerhtml.replace (/<span/s+class =.? obj.innerhtml = t; } var cnt = loopsearch (s, obj); t = obj.innerhtml var r =/{searchhl} (({(?! // searchhl}) | [^{])*) {// searchhl} /gt=t.replace (r, ", <span class = 'start'> $ 1 </span>"); obj.innerhtml = t;} function loopSearch (s, obj) {var cnt = 0; if (obj.nodeType == 3) {cnt = reemplazar (s, obj); devolver cnt; } para (var i = 0, c; c = obj.childnodes [i]; i ++) {if (! C.classname || c.classname! = "resaltar") cnt+= loopsearch (s, c); } return cnt;} función reemplazar (s, des) {var r = new Regexp (s, "g"); var tm = nulo; var t = dest.nodeValue; var cnt = 0; if (tm = t.match (r)) {cnt = tm.length; t = t.replace (r, "{searchhl}"+decode (s)+"{/searchhl}") des.nodeValue = t; } return cnt;}Estilo destacado:
<syle> .HighLight {fondo: rojo; font-weight: negrita; color: blanco; Font-size: 24px;} </style>HTML:
<Body> <Form> <Apla> <TD> <span> Por favor ingrese la cadena china: </span> <input type = "text" id = "txtchinese" size = "30" valor = "tener cuidado"> <input type = "button" onClick = "consulter ()" value = "Ver pinyiniNiNiNin"> </td> </tr> </pla> </borm> 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 = " <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">Huang 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> </span> <s span> <s span> href = "#uid23"> liu jian </a> </span> <span> <a href = "#uid23"> wang ying </a> </span> <span> <a href = "#uid23"> bai xikang </a> </span> <a href = "#uid23"> zhang jianbo </ail <span> <a href = "#uid23"> Lin feng </a> </span> </div> <Br /> <Br/> <div style = "Font-size: 14px; Font-Weight: Bold;"> Buscar a través de la primera letra del nombre, mantener la página enfocada y presione la combinación de carta continuamente. Por ejemplo: si desea encontrar "Huang Zhihua", puede presionar la letra continuamente: Hzh </div> <div ID = "DivkeyCache"> Filtrar la combinación de letras: </div> </body>
Haga clic aquí para descargar el código de ejemplo completo.
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 de JavaScript Errores y habilidades de depuración "," Resumen de las estructuras de datos de JavaScript y las habilidades de algoritmo "y" Resumen del uso de la operación matemática de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.