В этом примере статьи описывается, как JS получает первую букву китайского пиньина и быстро находит соответствующий китайский контент на странице через первую букву Pinyin. Поделитесь этим для вашей ссылки, следующим образом:
Осознайте эффект:
Рисунок 1:
Рисунок 2:
Китайская строка «позаботиться», введенная в этом примере, имеет три символа, которые являются полифоническими, поэтому в диалоговом окне оповещения показана комбинация множественных произношений;
Как это достичь?
Как быстро найти китайский контент на странице через первую букву Pinyin?
Принцип процесса заключается в следующем: например, для быстрого поиска имен некоторых людей, когда страница загружена, для всех имен всех людей устанавливается индекс, чтобы генерировать переписку между первой буквой пинеина и именем; Затем следите за событием клавиатуры, когда пользователь нажимает на клавиатуру, согласно ключу, стоит увидеть, какая буква нажата, а затем повторить, существует ли та же первая буква пиньина в индексе;
Здесь мы также реализуем функцию поиска в соответствии с комбинациями букв. Принцип заключается в следующем: когда пользователь нажимает клавишу, мы записываем время клавиши. Если интервал между двумя последовательными ключами составляет менее одной секунды, он считается комбинированным запросом. После добавления текущего значения ключа к предыдущему значению ключа я не буду много сказать, просто добавьте код!
Получите первую букву 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 ":" Мы ",", " 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 ":": " Кг "," 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 Marray Функция MakePy (str) {if (typeOf (str)! = "String") бросить новую ошибку (-1, "Функция MakePy требует параметров типа строки!"); Var arrresult = new Array (); // Сохранить массив промежуточных результатов для (var i = 0, len = str.length; i <len; i ++) {// Получить код Unicode var ch = str.charat (i); // Проверьте, находится ли код Unicode в диапазоне обработки, если он находится внутри, он возвращает первую букву пиньина первой буквы кода китайского характера. Если его нет, он вызывает другие функции для обработки arrresult.push (checkch (ch));} // обработка Arrresult, возвращая все возможные первые буквенные массивы строковых строк Mkrslt (arrresult);} Function Checkch (CH) {var uni = CH.CHARCODET (0), если он не в пределах доступа к себе, а также оригинал. if (Uni> 40869 || uni <19968) return ch; // DealWithothers (CH); // Проверьте, является ли оно полифоническим словом, оно обрабатывается как полифоническое слово, а не просто находить соответствующую начальную букву в строке StrChineseFirstpy (OmultIdiff [Uni]? OmultIdiff [Uni] :( strChineseFirstpy.CHARAT (uni-19968)); [""]; 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;}}} {var tmpArr = stmpрр. arrrrslt.slice (0); arrrslt = []; for (k = 0; k <strlen; k ++) {// копировать один и тот же Arrrsltvar tmp = tmparr.slice (0); // Добавить текущий символ [k] к концу каждого элемента для (var j = 0; j <tmp.length; j+) str.charat (k);} // Подключить копированный и модифицированный массив к arrrslt arrrrslt = arrrslt.concat (tmp);}}} return arrrslt;} // Удалить строку пространственной функции.prototype.trim = function () {return this.replace (/(^/s*) | (/s*$/g, "" "); } // Просмотреть функцию аббревиатуры пинина Query () {var str = document.getElementbyId ("txtchinese"). Value.trim (); if (str == "") return; var arrrslt = makepy (str); Alert (arrrslt);}Код индексации:
// используется для сохранения пара клавишных значений первой буквы и имени var namelist = new Array (); // Когда страница загружена, инициализируйте «Намелист». window.onload = function () {// Извлекать все имена в идентификатор "divname" var div = document.getElementById ("divName"); if (div) {var names = []; // совместим с Firefox и Chrome; if (div.textContent) {// Заменить все символы пробелов, включая пространства, вкладки, разрывы страниц и т. Д. С пробелами через reply (// s/ig, "") .split (");} else {name = div.innertext.replace (// s/ig,") .split (");"); } for (var i = 0; i <names.length; i ++) {if (names [i]! = ") {// Получить аббревиатуру пиняна var arrrslt = makepy (names [i]); // Добавить переписку между пинином и китайцем в массив 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 секунду if (tz - timezoneoffset> 1000) {// Задержка превышает одну секунду, повторно повторно временного снега = tz; keycache = key; } else {// задержка находится в пределах 1 секунду, keyCache фильтра += = key; } // Получить длину содержимого фильтра var keylength = keyCache.length; var word = ""; // Записывают китайские слова, которые соответствуют условиям // Передача индекса и выполняют поиск (var i = 0; i <namelist.length; i ++) {// seave aeply длины и сравните комбинацию букв фильтра if (i] [0] .substr (0, keylength) == keycache) {if (word == ") {word+= = nalist); // Выделите результаты поиска. Первый результат, который соответствует критериям, должен быть очищен до выделения, поэтому второй параметр здесь передается как: true hight (namelist [i] [1] .substr (0, keylength), true); } else {word + = "" + namelist [i] [1]; выделение (ииналист [i] [1] .substr (0, keylength), false); }}} // Показать комбинации букв фильтра в div var div = document.getElementbyid ("divkeycache"); if (div) {div.innerhtml = "Комбинации букв фильтра:" + keycache; }}Выделите код:
Функция Encode (s) {return S.Replace (/&/g, "&"). reply (/</g, "<"). replication (// g, ">"). Заменить (/(m///./8/,/^^)/ g, "// $ 1");} decode (s) {возврат S.Replace (//*././*/nmemplocy (///1/1,/,/,/^^)/ g, "$ 1"). Заменить (//// g, ">"). Заменить (/</g, "<"). Заменить (/&/g, "&");} // Выделите символ, указанный как "S", "Clear": Сборная ли выделительно выделенная функция содержания (s, ястно) {s. // alert ('Поиск ключевой слов не заполнено!'); вернуть ложь; } s = encode (s); var obj = document.getElementsbytagname ("body") [0]; var t = ""; if (typeof clear! = 'undefined' && clear) {// очистить ранее выделенный контент t = obj.innerhtml.replace (/<span/s+class =.? hight.?>? >(^ • >*)</span>/gi,"$1 "); obj.innerhtml = t; } var cnt = loopsearch (s, obj); t = obj.innerhtml var r =/{searchhl} (({? obj.innerhtml = t;} функция loopsearch (s, obj) {var cnt = 0; if (obj.nodeType == 3) {cnt = reply (s, obj); вернуть CNT; } for (var i = 0, c; c = obj.childnodes [i]; i ++) {if (! c.classname || c.classname! = "hight") cnt+= loopsearch (s, c); } return cnt;} function replace (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> .highlight {фон: красный; Font-Weight: Bold; Color: White; размер шрифта: 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> <pan> <a href = "#uid23"> Zhang ningning </a> </span> <pan> <a href = "#uid23"> li xu </a> </span> <pan> <a href = "#uid23"> li xu </a> </span> <span> <a href = "#uid23"> li </a> </span> <pran> <a href = "#uid23 <pan> <a href = "#uid23"> wang changfeng </a> </span> <pan> <a href = "#uid23"> liu qiyin </a> </span> <pan> <a href = "#uid23"> zhixin </af> </span> <pan> Zhihua </a> </span> <pan> <a href = "#uid23"> gao yuehua </a> </span> <pan> <a href = "#uid23"> li chengxin </a> </span> <pan> <a href = "#uid23"> zhao lin </a> </span> <a href = "#uid23" href = "#uid23"> liu jian </a> </span> <pan> <a href = "#uid23"> wang ying </a> </span> <pan> <a href = "#uid23"> bai xikang </a> </span> <pan> <a href = "#uid23"> zhang jainbo> <span> <a href = "#uid23" <pran> <a href = "#uid23"> lin feng </a> </span> </div> <br/> <br/> <div style = "font-size: 14px; font-weight: bold;"> Поиск через первую букву имени, сохраните страницу и постоянно нажимайте комбинацию букв. Например: если вы хотите найти «Huang Zhihua», вы можете непрерывно нажимать на букву: HZH </div> <div id = "divkeycache"> фильтровать комбинацию букв: </div> </body>
Нажмите здесь, чтобы загрузить полный пример кода.
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 о ошибках JavaScript и навыках отладки »,« Сводка структур данных JavaScript и навыков алгоритма »и« Сводка использования математической операции JavaScript ».
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.