Este exemplo de artigo descreve como o JS obtém a primeira letra do pinyin chinês e rapidamente encontra o conteúdo chinês correspondente na página através da primeira letra do Pinyin. Compartilhe -o para sua referência, como segue:
Perceba o efeito:
Figura 1:
Figura 2:
A string chinesa "tome cuidado" inserida neste exemplo tem três caracteres polifônicos, portanto a caixa de diálogo Alerta mostra uma combinação de múltiplas pronúncias;
Como alcançá -lo?
Como encontrar rapidamente o conteúdo chinês na página na primeira letra do Pinyin?
O princípio do processo é o seguinte: por exemplo, para pesquisar rapidamente os nomes de algumas pessoas, quando a página é carregada, um índice é estabelecido para todos os nomes das pessoas para gerar a correspondência entre a primeira letra do Pinyin e o nome; Em seguida, monitore o evento do teclado, quando o usuário pressionar o teclado, de acordo com a tecla, vale a pena ver qual letra é pressionada e, em seguida, itera se a mesma primeira letra do Pinyin existe no índice;
Aqui também implementamos a função de pesquisar de acordo com as combinações de cartas. O princípio é o seguinte: Quando o usuário pressiona a tecla, registramos a hora da tecla. Se o intervalo entre duas chaves consecutivas for menor que um segundo, é considerado uma consulta combinada. Depois de adicionar o valor da chave atual ao valor da chave anterior, não vou dizer muito, basta adicionar o código!
Obtenha a primeira letra do Pinyin:
var strchinesefirstpy = ""; // as 375 palavras polifônicas var estão incluídas aqui 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 ":" Ai "," 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 ":" nós "," 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"}; // parâmetros, String chinesa // Valor de retorno: Pinyin First String Array Função makepy (str) {if (typeof (str)! = "String") lançar novo erro (-1, "função makepy requer parâmetros de tipo string!"); Var ArrRresult = new Array (); // Salve a matriz de resultados intermediários para (var i = 0, len = str.Length; i <len; i ++) {// Obtenha código unicode var ch = str.charat (i); // Verifique se o código Unicode está dentro do intervalo de processamento, se estiver dentro, retorna a primeira letra da letra do código que está o caractere chinês. Se não estiver lá, ele chama outras funções para processar arrRresult.push (checkch (ch));} // processando ArrResult, retornando todas as matrizes de string de primeira letra do pinyin possível retornar mkrslt (arrResult); if (uni> 40869 || uni <19968) retornará ch; // Dealwithothers (CH); // Verifique se é uma palavra polifônica, é processada como uma palavra polifônica, não apenas encontre a letra inicial correspondente na string strchinesefirstpy diretamente (omultidiff [uni]? omultidiff [uni] :( strchinesefirstpy.charat (Uni-1998); [""]; para (var i = 0, len = arr.length; i <len; i ++) {var str = arr [i]; var strlen = str.length; if (strlen == 1) {para (var k = 0; k <arrrslt.length; mais) {drslT [k] = 0; arrrslt.slice (0); arrrslT = []; para (k = 0; k <strlen; k ++) {// copie o mesmo arrrsltvar tmp = tmparr.slice (0); // adicione o caractere atual [k] ao final de cada elemento (var j = 0; j <tmp.llmen; str.charat (k);} // conecta a matriz copiada e modificada a arrrslt arrrslt = arrrsllt.concat (tmp);}}} retorna arrrslt;} // remover função espacial string.protype.trim = function () {return this.place (/(/s*) | } // Visualize a função da abreviação pinyin query () {var str = document.getElementById ("txtchinese"). Value.trim (); if (str == "") retornar; var ArrrslT = Makepy (str); alerta (arrrslt);}Código de indexação:
// usado para salvar os pares de valores-chave da primeira letra e nome var namelist = new Array (); // Quando a página é carregada, inicialize "namelist". window.onload = function () {// extraia todos os nomes no id "divname" var div = document.getElementById ("divName"); if (div) {var names = []; // compatível com Firefox e Chrome; if (div.textContent) {// substitua todos os caracteres de espaço em branco, incluindo espaços, guias, quebras de página, etc. por espaços através do substituir (// s/ig, "") .split (");} else {names = div.innerText.replace (// s/ig," ") .split ("; "; } para (var i = 0; i <names.length; i ++) {if (nomes [i]! = "") {// Obtenha a abreviação pinyin var Arrrrslt = makepy (nomes [i]); // Adicione a correspondência entre Pinyin e Chinese ao Array Namelist.push (New Array (arrrslT.toString (), nomes [i])); }}}}Execute o código de pesquisa:
var timezoneoffset = 0; // Registre o tempo da chave var keycache = ""; // Registre as combinações de letas que são pressionadas continuamente // Pesquise quando a letra do teclado é pressionada document.onkeydown = function (event) {// Obtenha a letra real pressionada por "event.keycode" var key = string.fromCharcode (event.keycode); var tz = new Date (). getTime (); // Cálculo contínuo de atraso de chaves, definido como 1000 milissegundos, ou seja, 1 segundo se (TZ - TimeZoneOffset> 1000) {// O atraso excede um segundo, re -times de timeoffset = tz; keycache = key; } else {// O atraso está dentro de 1 segundo intervalo, o caractere do filtro keycache += key; } // Obtenha o comprimento do conteúdo do filtro var keyLength = keycache.length; var word = ""; // Registre as palavras chinesas que atendem às condições // transfira o índice e executam uma pesquisa (var i = 0; i <namelist.length; i ++) {// mar os caracteres de comprimento igual e compare a combinação de letra de filtro se (namelist [i] [0] .Substr (0, keyLength) == keycache) [if (word == "" // Destaque os resultados da pesquisa. O primeiro resultado que atende aos critérios deve ser limpo antes do destaque; portanto, o segundo parâmetro aqui é passado como: True Highlight (namelist [i] [1] .Substr (0, KeyLength), True); } else {word + = "" + namelist [i] [1]; destaque (namelist [i] [1] .Substr (0, KeyLength), false); }}} // Mostrar combinações de letas de filtro em div var div = document.getElementById ("divkeycache"); if (div) {div.innerhtml = "Combinações de letas de filtro:" + keycache; }}Destaque o código:
função codificação (s) {return s.place (///g, "&"). substitua (/</g, "<"). substituir (// g, ">"). substituir (/(////./*/$/^] )/ g, "// $ 1");} função (s) {retornar S.Replace (//-/./*//./by//gly/gly/ch]). // alert ('Pesquise palavra -chave não preenchido!'); retornar falso; } s = codificação (s); var obj = document.getElementsByTagName ("corpo") [0]; var t = ""; if (typeof clear! = 'indefinido' && clear) {// limpe o conteúdo anterior t = obj.innerhtml.replace (/<span/s+class =.? Destaque.? obj.innerhtml = t; } var cnt = loopsearch (s, obj); t = obj.innerhtml var r =/{SearchHl} (({(?! // SearchHl}) | [^{])*) {// searchhl} /gt=t.replace (r "<span class = 'destacar'> $ 1 </span>); obj.innerhtml = t;} função loopsearch (s, obj) {var cnt = 0; if (obj.nodetype == 3) {cnt = reply (s, obj); devolver cnt; } para (var i = 0, c; c = obj.childnodes [i]; i ++) {if (! c.className || c.className! = "Highlight") cnt+= loopsearch (s, c); } retornar cnt;} função substituir (s, dest) {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}"+decodificação (s)+"{/SearchHl}") dest.nodEvalue = t; } retornar cnt;}Estilo de destaque:
<estilo> .Highlight {Background: Red; Fonte-peso: negrito; cor: branco; Fonte-tamanho: 24px;} </style>Html:
<Body> <form> <table> <td> <pan> Por favor, digite a sequência chinesa: </span> <input type = "text" id = "txtchinese" size = "30" value = "tome cuidado"> <input type = "button" onclick = "query ()" value = "exibição pinyinin> <pange> <a href = "#uid23"> chen xiaowei </a> </span> <pan> <a href = "#uid23"> zhang ningning </a> </span> </span> <a href = "#uid23"> xu </a> </span> <a <a href = "#uid23"> xu </a> </span> <a href = "#uid23"> xu </a> </span> <a href = "#uid23"> xu </a> </span> <a href = "#uid2"> li xu </a> </span> <a <a href = "#uid23"> xu </a) Xu </a> </span> <pan> <a href = "#uid23"> wang changfeng </a> </span> <pan> <a href = "#uid23"> liu qiyin </a> </span> <pan> <a href = "#uid23"> cheninin href = "#uid23"> huang zhihua </a> </span> <pan> <a href = "#uid23"> gao yuehua </a> </span> </span> <a href = "#uid23"> li chengxin </a> </span> <apan> <apan> <a href = "#uid23"> li chengxin </a> </span> <apan> Lin </a> </span> <pan> <a href = "#uid23"> Liu jian </a> </span> <pan> <a href = "#uid23"> wang ying </a> </ap span> <a href = "#uid23"> bai xikang </a> Jianbo </a> </span> <pan> <a href = "#uid23"> lin feng </a> </span> </div> <r/> <r/> <div style = "font-size: 14px; font-weight: Bold;"> Pesquise a primeira letra do nome, mantenha a página focada, e pressione a letra. Por exemplo: se você deseja encontrar "Huang Zhihua", pode pressionar a letra continuamente: hzh </div> <div id = "divkeycache"> filtre a combinação de letra: </div> </body>
Clique aqui para baixar o código de exemplo 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 erros de JavaScript e habilidades de depuração "," Resumo das estruturas de dados JavaScript e habilidades de algoritmo "e" Resumo do uso de operação matemática JavaScript "
Espero que este artigo seja útil para a programação JavaScript de todos.