ตัวอย่างบทความนี้อธิบายถึงวิธีที่ JS ได้รับจดหมายฉบับแรกของ Pinyin จีนและพบเนื้อหาจีนที่เกี่ยวข้องอย่างรวดเร็วในหน้าผ่านตัวอักษรตัวแรกของพินอิน แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
ตระหนักถึงผลกระทบ:
รูปที่ 1:
รูปที่ 2:
สตริงภาษาจีน "ดูแล" ที่ป้อนในตัวอย่างนี้มีสามอักขระที่เป็น polyphonic ดังนั้นกล่องโต้ตอบการแจ้งเตือนจะแสดงการรวมกันของการออกเสียงหลายครั้ง;
จะบรรลุได้อย่างไร?
วิธีการค้นหาเนื้อหาภาษาจีนอย่างรวดเร็วบนหน้าผ่านตัวอักษรตัวแรกของพินอิน?
หลักการกระบวนการมีดังนี้: ตัวอย่างเช่นการค้นหาชื่อของบางคนอย่างรวดเร็วเมื่อโหลดหน้าเว็บจะถูกสร้างขึ้นดัชนีจะถูกสร้างขึ้นสำหรับชื่อของทุกคนเพื่อสร้างการติดต่อระหว่างตัวอักษรตัวแรกของพินอินและชื่อ; จากนั้นตรวจสอบเหตุการณ์แป้นพิมพ์เมื่อผู้ใช้กดแป้นพิมพ์ตามคีย์มันคุ้มค่าที่จะดูว่าตัวอักษรใดถูกกดแล้ววนซ้ำว่าตัวอักษรตัวแรกของ 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" "," 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 ":" 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 " "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 "," 33432 " 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 " 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" B "," 40109 ":" ZQ "," 40479 ":" ND "," 40516 ":" HG "," 40536 ":" HG "," 40583 ":" QJ " , "40765": "yq", "40784": "qj", "40840": "yk", "40863": "qjg"}; // พารามิเตอร์, สตริงภาษาจีน // ค่าส่งคืน: pinyin first string array function makepy (str) {ถ้า (typeof (str)! = "string") โยนข้อผิดพลาดใหม่ (-1, "ฟังก์ชั่น makepy ต้องการพารามิเตอร์ประเภทสตริง!"); var arrresult = array ใหม่ (); // บันทึกอาร์เรย์ของผลลัพธ์ระดับกลางสำหรับ (var i = 0, len = str.length; i <len; i ++) {// รับรหัส Unicode var ch = str.charat (i); // ตรวจสอบว่ารหัส Unicode อยู่ในช่วงการประมวลผลหรือไม่ หากไม่มีที่นั่นจะเรียกฟังก์ชั่นอื่น ๆ เพื่อประมวลผล arrresult.push (checkch (ch));} // การประมวลผล arrresult, ส่งคืน pinyin สตริงตัวอักษรตัวแรกที่เป็นไปได้ทั้งหมดที่เป็นไปได้ if (uni> 40869 || uni <19968) return ch; // gelwethothers (ch); // ตรวจสอบว่าเป็นคำโพลีโฟนิกมันถูกประมวลผลเป็นคำโพลีโฟนิกไม่เพียง แต่ค้นหาตัวอักษรเริ่มต้นที่เกี่ยวข้องในสตริง strchinesefirstpy โดยตรง (omultidiff [uni]? omultidiff [uni] :( strchinesefirstpy.charat [""]; สำหรับ (var i = 0, len = arr.length; i <len; i ++) {var str = arr [i]; var strlen = str.length; ถ้า (strlen == 1) {สำหรับ (var k = 0; k <arrrslt.length; arrrslt.slice (0); arrrslt = []; สำหรับ (k = 0; k <strlen; k ++) {// คัดลอก arrrsltvar tmp = tmparr.slice (0); // เพิ่มตัวละครปัจจุบัน str.charat (k);} // เชื่อมต่ออาร์เรย์ที่คัดลอกและแก้ไขกับ arrrslt arrrslt = arrrslt.concat (tmp);}}} return arrrslt;} // remove string ฟังก์ชันพื้นที่) } // ดูการสืบค้นฟังก์ชั่นตัวย่อ pinyin () {var str = document.getElementById ("txtchinese"). value.trim (); ถ้า (str == "") กลับ; var arrrslt = makepy (str); การแจ้งเตือน (arrrslt);}รหัสการจัดทำดัชนี:
// ใช้เพื่อบันทึกคู่คีย์ของตัวอักษรตัวแรกและชื่อ var namelist = new Array (); // เมื่อโหลดหน้าเว็บให้เริ่มต้น "namelist" window.onload = function () {// แยกชื่อทั้งหมดใน ID "Divname" var div = document.getElementById ("Divname"); if (div) {var names = []; // เข้ากันได้กับ Firefox และ Chrome; if (div.TextContent) {// แทนที่อักขระช่องว่างทั้งหมดรวมถึงช่องว่างแท็บตัวแบ่งหน้า ฯลฯ ด้วยช่องว่างผ่านการแทนที่ (// s/ig, "") .split (");} else {names = div.innertext.replace (// s/ig," "). } สำหรับ (var i = 0; i <names.length; i ++) {ถ้า (ชื่อ [i]! = "") {// รับตัวย่อ pinyin var arrrslt = makepy (ชื่อ [i]); // เพิ่มการติดต่อระหว่างพินอินและภาษาจีนไปยังอาร์เรย์ namelist.push (อาร์เรย์ใหม่ (arrrslt.toString (), ชื่อ [i])); -ดำเนินการรหัสค้นหา:
var timezoneOffset = 0; // บันทึกเวลาคีย์ var keycache = ""; // บันทึกการรวมตัวอักษรที่ถูกกดอย่างต่อเนื่อง // ค้นหาเมื่อตัวอักษรแป้นพิมพ์ถูกกด Document.onkeydown = function (เหตุการณ์) {// รับจดหมายจริงที่กดโดย "Event.keCyde" var key = string.fromCharcode (event.keyCode); var tz = วันที่ใหม่ (). getTime (); // การคำนวณการหน่วงเวลาอย่างต่อเนื่องตั้งค่าเป็น 1,000 มิลลิวินาทีนั่นคือ 1 วินาทีถ้า (tz - timezoneoffset> 1000) {// ความล่าช้าเกินหนึ่งวินาที Keycache = key; } else {// การหน่วงเวลาอยู่ในช่วง 1 วินาที, คีย์อักขระตัวกรอง += คีย์; } // รับความยาวเนื้อหาของตัวกรอง var keyLength = keycache.length; var word = ""; // บันทึกคำภาษาจีนที่ตรงตามเงื่อนไข // ถ่ายโอนดัชนีและทำการค้นหา (var i = 0; i <namelist.length; i ++) {// seave ตัวละครความยาวเท่ากันและเปรียบเทียบการรวมตัวอักษรตัวกรองถ้า (namelist [i] [0] .substr (0, keylength) == Keycache) // เน้นผลการค้นหา ผลลัพธ์แรกที่ตรงตามเกณฑ์จะต้องล้างก่อนการไฮไลต์ดังนั้นพารามิเตอร์ที่สองที่นี่จะถูกส่งผ่านเป็น: ไฮไลต์จริง (namelist [i] [1] .substr (0, keylength), true); } else {word + = "" + namelist [i] [1]; ไฮไลต์ (namelist [i] [1] .substr (0, keylength), false); }}} // แสดงการรวมตัวกรองตัวกรองใน div var div = document.getElementById ("divkeycache"); if (div) {div.innerhtml = "ตัวกรองการรวมตัวอักษร:" + keycache; -ไฮไลต์รหัส:
ฟังก์ชั่นเข้ารหัส (s) {return s.replace (/&/g, "&") แทนที่ (/</g, "<") แทนที่ (// g, ">") แทนที่ (/( [[[//./*/$/^ like)/ g, "// $ 1");} ฟังก์ชั่น S.Replace (// [[/./*// [เหมือนกัน /(/$/^ เหมือนกัน)/ g, "$ 1") แทนที่ (//// g, ">") แทนที่ (/</g, "<") แทนที่ (/&/g, "&");} // ไฮไลต์ตัวละครที่ระบุโดย " // Alert ('คำหลักค้นหาไม่ได้กรอก!'); กลับเท็จ; } s = เข้ารหัส (s); var obj = document.getElementsByTagname ("body") [0]; var t = ""; if (typeof clear! = 'undefined' && clear) {// ล้างเนื้อหาที่ไฮไลต์ก่อนหน้านี้ 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 = 'ไฮไลต์'> $ 1 </span>"); obj.innerhtml = t;} ฟังก์ชั่น loopsearch (s, obj) {var cnt = 0; if (obj.nodeType == 3) {cnt = แทนที่ (s, obj); คืน CNT; } สำหรับ (var i = 0, c; c = obj.childnodes [i]; i ++) {ถ้า (! } return cnt;} ฟังก์ชั่นแทนที่ (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; Font-Size: 24px;} </style>html:
<body> <form> <table> <td> <span> โปรดป้อนสตริงภาษาจีน: </span> <อินพุต type = "text" id = "txtchinese" size = "30" value = "ใช้ความระมัดระวัง"> <อินพุต type = "ปุ่ม" onclick = "query () href = "#uid23"> Chen Xiaowei </a> </span> <span> <a href = "#uid23"> Zhang Ningning </a> </span> <span> <a href = "#uid23"> li xu </a> <span> <a href = "#uid23"> wang changfeng </a> </span> <pan> <a href = "#uid23"> liu qiyin </a> </span> <span> <a href = "#uid23"> Chen Zhixin </a> Zhihua </a> </span> <span> <a href = "#uid23"> gao yuehua </a> </span> <span> <a href = "#uid23"> li chengxin </a> </span> href = "#uid23"> liu jian </a> </span> <span> <a href = "#uid23"> wang ying </a> </pan> <span> <a href = "#uid23"> bai xikang </a> <span> <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>
คลิกที่นี่เพื่อดาวน์โหลดรหัสตัวอย่างที่สมบูรณ์
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของเว็บไซต์นี้: "สรุปอัลกอริทึมและทักษะการค้นหา JavaScript", "บทสรุปของทักษะการถ่ายโอนค่า JavaScript การถ่ายโอนทักษะ", "บทสรุปของทักษะการเข้ารหัส JavaScript" สรุปทักษะ " ข้อผิดพลาดของ JavaScript และทักษะการดีบัก "," บทสรุปของโครงสร้างข้อมูล JavaScript และทักษะอัลกอริทึม "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน