يصف مثال المقالة هذا كيف يحصل JS على الحرف الأول من Pinyin الصيني وسرعان ما يجد المحتوى الصيني المقابل على الصفحة من خلال الحرف الأول من Pinyin. شاركه للرجوع إليه ، على النحو التالي:
إدراك التأثير:
الشكل 1:
الشكل 2:
تحتوي السلسلة الصينية "TATE CARE" التي تم إدخالها في هذا المثال على ثلاثة أحرف هي متعددة الأدوات ، وبالتالي فإن مربع الحوار التنبيه يعرض مزيجًا من النطق المتعدد ؛
كيف تحقق ذلك؟
كيفية العثور بسرعة على المحتوى الصيني على الصفحة من خلال الحرف الأول من Pinyin؟
مبدأ العملية على النحو التالي: على سبيل المثال ، للبحث بسرعة عن أسماء بعض الأشخاص ، عند تحميل الصفحة ، يتم إنشاء فهرس لجميع أسماء الأشخاص لإنشاء المراسلات بين الحرف الأول من Pinyin والاسم ؛ ثم راقب حدث لوحة المفاتيح ، عندما يضغط المستخدم على لوحة المفاتيح ، وفقًا للمفتاح ، من المفيد معرفة الحرف الذي يتم الضغط عليه ، ثم التكرار حول ما إذا كان الحرف الأول من Pinyin موجود في الفهرس ؛
نحن هنا نطبق أيضًا وظيفة البحث وفقًا لمجموعات الرسائل. المبدأ هو كما يلي: عندما يضغط المستخدم على المفتاح ، فإننا نسجل وقت المفتاح. إذا كان الفاصل بين مفتاحين متتاليين أقل من ثانية واحدة ، فإنه يعتبر استعلامًا مزيجًا. بعد إضافة قيمة المفتاح الحالي إلى القيمة الرئيسية السابقة ، لن أقول الكثير ، فقط أضف الرمز!
احصل على الحرف الأول من Pinyin:
var strchinesefirstpy = "" ؛ // يتم تضمين كلمة polyphonic 375 هنا 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 ":" WE "،" ، "،" 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: "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: ، "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 ": 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: 38518 ":" YT "،" 38551 ":" WK "،" 38585 ":" ZC "،" 38704 ":" XS "،" 38739 ":" LJ "،" 38761 ":" GJ "، "38808": "SQ" ، "39048": "JG" ، "39049": "XJ" ، "39052": "Hg" ، "39076:" CZ "،" 39271 ": ، "39534": "TD" ، "39552": "TD" ، "39584": "PB" ، "39647": "SB" ، "39730": "LG" ، "39748": "TP B "،" 40109 ":" ZQ "،" 40479 ":" ND "،" 40516 ":" Hg "،" 40536 ":" Hg "،" 40583 ": ، "40765": "YQ" ، "40784": "QJ" ، "40840": "yk" ، "40863": "qjg"} ؛ // parameters ، سلسلة صينية // قيمة الإرجاع: Pinyin First String Array Function Makepy (str) {if (typeof (str)! = "string") رمي خطأ جديد (-1 ، "يتطلب الدالة معلمات نوع السلسلة!") ؛ var arrresult = new array () ؛ // احفظ صفيف النتائج الوسيطة لـ (var i = 0 ، len = str.length ؛ i <len ؛ i ++) {// الحصول على رمز Unicode var ch = str.charat (i) ؛ إذا لم يكن هناك ، فإنه يستدعي وظائف أخرى لمعالجة RERRESULT.PUSH (checkch (CH)) ؛} // معالجة rentrresult ، وإعادة جميع صفائف سلسلة الحروف الأولى pinyin الإرجاع mkrslt (rerresult) ؛} checkch checkch (ch) if (uni> 40869 || uni <19968) return ch ؛ // dealwiththorths (ch) ؛ // تحقق مما إذا كانت كلمة متعددة الفقرة ، تتم معالجتها ككلمة متعددة الفقرة ، وليس فقط العثور على الحرف الأولي المقابل في سلسلة strchinesefirstpy مباشرة (omultidiff [uni]؟ [""] ؛ 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 <arrslt.length ؛ k ++) arrrslt.slice (0) ؛ arrrslt = [] ؛ for (k = 0 ؛ k <strlen ؛ k ++) {// انسخ نفس arrsltvar tmp = tmparr.slice (0) ؛ // إضافة الحرف الحالي str [k] إلى نهاية كل عنصر (var j = 0 ؛ str.charat (k) ؛} // قم بتوصيل الصفيف المنسخ والمعدل إلى arrrslt arrrslt = arrrslt.concat (tmp) ؛}}} return arrrslt ؛} // إزالة وظيفة الفضاء }. إذا (str == "") العودة ؛ var arrrslt = makepy (str) ؛ تنبيه (ARRRSLT) ؛}رمز الفهرسة:
// تستخدم لحفظ أزواج القيمة الرئيسية للحرف الأول واسم var namelist = new array () ؛ // عندما يتم تحميل الصفحة ، تهيئة "Namelist". window.onload = function () {// استخراج جميع الأسماء في المعرف "divName" var div = document.getElementById ("divName") ؛ if (div) {var names = [] ؛ // متوافق مع Firefox و Chrome ؛ if (div.textContent) {// استبدل جميع أحرف المسافة البيضاء ، بما في ذلك المساحات ، علامات التبويب ، فواصل الصفحة ، إلخ. مع المسافات من خلال استبدال (// s/ig ، "") .Split (") ؛ } لـ (var i = 0 ؛ i <names.length ؛ i ++) {if (names [i]! = "") {// احصل على abbreviation pinyin var arrrslt = makepy (names [i]) ؛ // أضف المراسلات بين Pinyin والصينية إلى namelist.push الصفيف (Array (Arrrslt.ToString () ، أسماء [i])) ؛ }}}}قم بتنفيذ رمز البحث:
var timezoneoffset = 0 ؛ // سجل مفتاح الوقت var keycache = "" ؛ // سجل مجموعات الحروف التي يتم الضغط عليها بشكل مستمر // البحث عند الضغط على مستند لوحة المفاتيح. var tz = new date (). getTime () ؛ // حساب تأخير المفتاح المستمر ، الذي تم ضبطه على 1000 مللي ثانية ، أي ثانية واحدة إذا (TZ - TimeZoneOffset> 1000) {// يتجاوز التأخير ثانية واحدة ، معاد توقيت timezoneoffset = tz ؛ keycache = المفتاح ؛ } آخر {// التأخير هو ضمن نطاق واحد ثانية ، keycache keycache += key ؛ } // احصل على طول محتوى المرشح var keylength = keycache.length ؛ var word = "" ؛ // سجل الكلمات الصينية التي تلبي الشروط // نقل الفهرس وأداء بحث (var i = 0 ؛ i <namelist.length ؛ i ++) {// seave أحرف الطول المتساوي وقارن مجموعة الحروف المرشح إذا (namelist [i] [0] // تسليط الضوء على نتائج البحث. يجب مسح النتيجة الأولى التي تفي بالمعايير قبل التمييز ، وبالتالي يتم تمرير المعلمة الثانية هنا على النحو التالي: تسليط الضوء الحقيقي (namelist [i] [1] .Substr (0 ، keylength) ، true) ؛ } آخر {word + = "" + namelist [i] [1] ؛ تسليط الضوء على (namelist [i] [1] .Substr (0 ، keylength) ، false) ؛ }}} // إظهار مجموعات حروف المرشح في div var div = document.getElementById ("divKeyCache") ؛ if (div) {div.innerhtml = "Filter Letter Complinations:" + keycache ؛ }}رمز تمييز:
دالة encode (s) {return s.replace (/&/g ، "&"). استبدال (/</g ، "<"). استبدال (// g ، " S.Replace (// Budap/./*/ Budap//////كانت هناك//^//^ ،/g ، "$ 1"). استبدال (/// g ، ">"). استبدال (/</g ، "<"). استبدال (/&/g ، "&") ؛ // ALERT ('Search Keyword لم يتم ملئها! ") ؛ العودة كاذبة } s = encode (s) ؛ var obj = document.getElementSbyTagName ("body") [0] ؛ var t = "" ؛ إذا (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}) | obj.innerhtml = t ؛} function loopsearch (s ، obj) {var cnt = 0 ؛ if (obj.nodeType == 3) {cnt = استبدال (s ، obj) ؛ إرجاع CNT ؛ } لـ (var i = 0 ، c ؛ c = obj.childnodes [i] ؛ i ++) {if (! c.className || } 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 ؛ } إرجاع cnt ؛}تسليط الضوء على النمط:
<style> .highlight {background: Red ؛ Font-Weight: Bold ؛ Color: White ؛ حجم الخط: 24px ؛} </style>HTML:
<Body> <Porm> <Table> <td> <span> الرجاء إدخال السلسلة الصينية: </span> <إدخال type = "text" id = "txtchinese" size = "30" value = "tave care"> <input type = "button" onClick = "Query ()" value = "view pinyin abbreviation"> href = "#uid23"> chen xiaowei </a> </span> <span> <a href = "#uid23"> zhang ningning </a> </span> <span> <ADID23> <span> <a href = "#uid23"> wang changfeng </a> </span> <span> <a href = "#uid23" zhihua </a> </span> <span> <a href = "#uid23"> gao yuehua </a> </span> <span> <a href = "#uid23"> li chengxin </a> </span> <span> <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> <a href = " <span> <a href = "#uid23"> lin feng </a> </span> </viv> <br/> <br/> <div style = "font-size: 14px ؛ font-weight: Bold ؛"> ابحث من خلال الحرف الأول من الاسم ، والحفاظ على تركيز الصفحة ، واضغط على مجموعة الأحرف بشكل مستمر. على سبيل المثال: إذا كنت ترغب في العثور على "Huang Zhihua" ، فيمكنك الضغط على الحرف بشكل مستمر: hzh </viv> <div id = "divkeycache"> تصفية مجموعة الحروف: </div> </body>
انقر هنا لتنزيل رمز المثال الكامل.
لمزيد من المعلومات حول المحتوى المتعلق بـ JavaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص خوارزمية البحث عن JavaScript ومهارات" ملخص لمهارات تشغيل قيمة JavaCript "،" ملخص لمهارات تشفير JavaScript ، "ملخص" ، "ملخص" ، "ملخص" ، ملخص ، "ملخص" ، ملخص ، "ملخص" ، "ملخص" ، "ملخص" ، ملخص ، "ملخص ،" ملخص ، "ملخص ،" ملخص ، "ملخص ،" ملخص ، "ملخص ،" ملخص ، "ملخص ،" ملخص ، "ملخص ،" ملخص ، "ملخص ،" ملخص ، "ملخص ،" ملخص ، "ملخص ،" ملخص ، "ملخص ،" ملخص ، "ملخص ،" ملخص "، من أخطاء JavaScript ومهارات تصحيح الأخطاء "،" ملخص هياكل بيانات JavaScript ومهارات الخوارزمية "و" ملخص استخدام التشغيل الرياضي JavaScript "
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.