Contoh artikel ini menjelaskan bagaimana JS memperoleh huruf pertama pinyin Cina dan dengan cepat menemukan konten Cina yang sesuai di halaman melalui huruf pertama pinyin. Bagikan untuk referensi Anda, sebagai berikut:
Menyadari efeknya:
Gambar 1:
Gambar 2:
String Cina "Take Care" yang dimasukkan dalam contoh ini memiliki tiga karakter yang polifonik, sehingga kotak dialog peringatan menunjukkan kombinasi dari beberapa pengucapan;
Bagaimana cara mencapainya?
Bagaimana cara menemukan konten Cina dengan cepat di halaman melalui huruf pertama pinyin?
Prinsip proses adalah sebagai berikut: misalnya, untuk dengan cepat mencari nama beberapa orang, ketika halaman dimuat, indeks ditetapkan untuk semua nama orang untuk menghasilkan korespondensi antara huruf pertama pinyin dan namanya; Kemudian pantau acara keyboard, ketika pengguna menekan keyboard, sesuai dengan tombol, ada baiknya melihat huruf mana yang ditekan, dan kemudian mengulangi apakah huruf pertama yang sama dari pinyin ada dalam indeks;
Di sini kami juga menerapkan fungsi pencarian sesuai dengan kombinasi huruf. Prinsipnya adalah sebagai berikut: Ketika pengguna menekan tombol, kami mencatat waktu tombol. Jika interval antara dua kunci berturut -turut kurang dari satu detik, itu dianggap sebagai kueri kombinasi. Setelah menambahkan nilai kunci saat ini ke nilai kunci sebelumnya, saya tidak akan banyak bicara, cukup tambahkan kode!
Dapatkan huruf pertama pinyin:
var strchinesefirstpy = ""; // 375 kata polifonik var disertakan di sini 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 ":" celakehkan "," 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 ":" kami "," 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", "3425": "zc "," 34259 ":" XL "," 34425 ":" JH "," 34430 ":" XH "," 34485 ":" Kh "," 34503 ":" ys "," 34532 ":" h G "," 34552 ":" xs "," 34558 ":" kamu "," 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 ":" kamu "," 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, Chinese String // Nilai Pengembalian: Pinyin First String Array Function Makpy (str) {if (typeof (str)! = "String") melempar kesalahan baru (-1, "Function Makpy membutuhkan parameter tipe string!"); Var arrresult = array baru (); // Simpan array hasil perantara untuk (var i = 0, len = str.length; i <len; i ++) {// Dapatkan kode unicode var ch = str.charat (i); // Periksa apakah kode unicode berada dalam kisaran pemrosesan, jika ada di dalam, ia mengembalikan huruf pinyin pertama dari kode yang adalah karakter Cina. Jika tidak ada di sana, ia memanggil fungsi lain untuk memproses arrresult.push (checkch (ch));} // memproses arrresult, mengembalikan semua kemungkinan pinyin huruf string array return mkrslt (arrresult);} function checkch Anda (CH) {var uni = ch.charcodeat (0);//jika tidak ada dalam proses Anda dan di dalamnya dan di dalamnya di dalamnya dan di dalamnya (0);//jika tidak ada dalam kisaran Charaes dan Chare di dalamnya (0); fungsi jika (uni> 40869 || uni <19968) mengembalikan ch; // Dealwithothers (ch); // Periksa apakah itu kata polifonik, itu diproses sebagai kata polifonik, tidak hanya menemukan huruf awal yang sesuai di string strchinesefirstpy secara langsung (omultidiff [uni]? omultidiff [uni] :( strchinesefirstpy.charat (uni-19968); [""]; untuk (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]+= = = = {k+{{k] {k+{var k] {k] {k] {k] {k+{k] {k+{K+= arrrslt.slice (0); arrrslt = []; for (k = 0; k <strlen; k ++) {// Salin arrrsltvar tmp = tmparr.slice (0); // Tambahkan karakter saat ini ke akhir setiap elemen untuk (var j = 0; j <pry. str.charat (k);} // Sambungkan array yang disalin dan dimodifikasi ke arrrslt arrrslt = arrrslt.concat (tmp);}}} return arrrslt;} // hapus space function string.prototype.trim = function () {return this.replace (//s strototype.trim = function () {return this.replace (//s strototype.trim = function () {return this } // Lihat kueri fungsi singkatan pinyin () {var str = document.getElementById ("txtchinese"). Value.trim (); if (str == "") kembali; var arrrslt = makpy (str); waspada (arrrslt);}Kode Pengindeksan:
// Digunakan untuk menyimpan pasangan nilai kunci dari huruf pertama dan nama var namelist = array baru (); // Saat halaman dimuat, inisialisasi "namelist". window.onload = function () {// Ekstrak semua nama dalam ID "DivName" var div = document.getElementById ("DivName"); if (div) {var name = []; // kompatibel dengan firefox dan chrome; if (div.textContent) {// ganti semua karakter whitespace, termasuk spasi, tab, istirahat halaman, dll. Dengan spasi melalui ganti (// s/ig, "") .split (");} else {names = div.innertext.replace (// s/ig," ") .split ("); } untuk (var i = 0; i <name.length; i ++) {if (nama [i]! = "") {// Dapatkan pinyin singkatan var arrrslt = makpy (nama [i]); // Tambahkan korespondensi antara pinyin dan Cina ke array namelist.push (array baru (arrrslt.tostring (), nama [i])); }}}}Jalankan kode pencarian:
var timezoneoffset = 0; // Rekam waktu kunci var keycache = ""; // Catat kombinasi huruf yang ditekan terus menerus // Cari ketika huruf keyboard ditekan document.onkeydown = function (event) {// Dapatkan huruf aktual ditekan oleh "event.keycode" var key = string.fromCharCode (event.keycode); var tz = tanggal baru (). getTime (); // Perhitungan penundaan kunci kontinu, diatur ke 1000 milidetik, yaitu, 1 detik jika (TZ - TimeZoneOffset> 1000) {// penundaan melebihi satu detik, waktu ulang timeZoneOffset = TZ; keycache = key; } else {// penundaan dalam kisaran 1 detik, keycache karakter filter += key; } // Dapatkan panjang konten filter var keylength = keycache.length; var word = ""; // Rekam kata -kata Cina yang memenuhi kondisi // Transfer indeks dan lakukan pencarian (var i = 0; i <namelist.length; i ++) {// seave karakter panjang yang sama dan bandingkan kombinasi huruf filter if (namelist [i] [0] .substr (0, keylength) == keycache KeyCache) {if (word == ") {neMel (word ==") {neMelist) {namelist) {namelist) {IF (word == ") // Sorot hasil pencarian. Hasil pertama yang memenuhi kriteria harus dihapus sebelum menyorot, sehingga parameter kedua di sini dilewati sebagai: highlight true (namelist [i] [1] .substr (0, keylength), true); } else {word + = "" + naMeList [i] [1]; sorot (namelist [i] [1] .substr (0, keylength), false); }}} // Tampilkan kombinasi huruf filter di div var div = document.geteLementById ("diveycache"); if (div) {div.innerHtml = "kombinasi huruf filter:" + keycache; }}Kode Sorotan:
Function Encode {return s.replace (/&/g, "&"). REPLACE (/</g, "<"). REPLACE (// G, ">"). Ganti (/(ace///./*/$/^) S.Replace (//#/./*/*/ media/(/$/^....)/ g, "$ 1"). Ganti (//// G, ">"). Ganti (/</g, "<"). Ganti (/&/g, ");} // Sorot karakter yang ditentukan oleh" s "," clear ": apakah akan membersihkannya sebelumnya bahwa konten yang akan dikendarai sebelumnya The Clear The Clears the the The Clears sebelumnya The Clear Dorigur. // peringatan ('Kata kunci pencarian tidak diisi!'); mengembalikan false; } s = encode (s); var obj = document.geteLementsbyTagname ("body") [0]; var t = ""; if (typeOf clear! = 'tidak terdefinisi' && clear) {// hapus konten yang sebelumnya disorot t = obj.innerHtml.replace (/<span/s+class =.? Sorot.?>(engkapi<>**')</span>/gi ,"$1 "); 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;} function loopsearch (s, obj) {var cnt = 0; if (obj.nodetype == 3) {cnt = ganti (s, obj); mengembalikan CNT; } untuk (var i = 0, c; c = obj.childnodes [i]; i ++) {if (! c.classname || c.classname! = "highlight") cnt+= loopsearch (s, c); } return cnt;} function ganti (s, dest) {var r = regexp baru (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;}Gaya Sorotan:
<tyle> .highlight {background: red; font-weight: bold; color: white; Ukuran font: 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 span>#uid23 "> Li xu </a> </span> <pan> <span>#uid23"> Li xu> </a> </span> <span>#span = "#uid2"> Li XU </a> </span> <span> <span = "#uid"> Li xu> </san> </span> <span>#span = "#uid2 <span> <a href = "#uid23"> wang changfeng </a> </span> <span> <a href = "#uid23"> liu qiyin </a> </span> <span> <a href = "#uid23"> chen zhixin </san> </span> <a span = "#uid23"> chen zhixin </san> </span> <a span = "#uid23"> chen zhixin </a> </span> <span> Zhihua </a> </span> <span> <a href = "#uid23"> gao yuehua </a> </span> <span> <a href = "#uid23"> li chengxin </a> </span> <span> <a href = "#uid23"> zhao </san> <span> <san> <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> <span> <span = "#uid2" <span> <a href = "#uid23"> lin feng </a> </span> </div> <br/> <br/> <div style = "font-size: 14px; font-weight: tebal;"> Cari melalui huruf pertama dari nama, jaga agar halaman tetap fokus, dan tekan kombinasi huruf terus menerus. Misalnya: Jika Anda ingin menemukan "Huang Zhihua", Anda dapat menekan huruf terus menerus: hzh </div> <div id = "DiveyCache"> Filter kombinasi huruf: </div> </body>
Klik di sini untuk mengunduh kode contoh lengkap.
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 dari kesalahan javascript dan keterampilan debugging "," Ringkasan Struktur Data JavaScript dan Keterampilan Algoritma "dan" Ringkasan Penggunaan Operasi Matematika JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.