이 기사 예제는 JS가 중국의 첫 번째 편지를 얻는 방법을 설명하고 Pinyin의 첫 글자를 통해 페이지에서 해당 중국 내용을 빠르게 찾습니다. 다음과 같이 참조에 대해 공유하십시오.
효과를 실현하십시오 :
그림 1 : 그림 1.
그림 2 : 그림 2.
이 예에서 입력 한 중국 문자열 "Take Care"에는 다성이있는 세 문자가 있으므로 경고 대화 상자에는 여러 발음의 조합이 표시됩니다.
그것을 달성하는 방법?
Pinyin의 첫 글자를 통해 페이지에서 중국 내용을 빠르게 찾는 방법은 무엇입니까?
프로세스 원칙은 다음과 같습니다. 예를 들어, 일부 사람들의 이름을 신속하게 검색하려면 페이지가로드되면 모든 사람들의 이름에 대한 색인이 설정되어 Pinyin의 첫 글자와 이름 사이의 서신을 생성합니다. 그런 다음 키보드 이벤트를 모니터링하면 사용자가 키보드를 누르면 키에 따라 어떤 문자를 누르는 지 확인한 다음 Pinyin의 동일한 첫 글자가 색인에 존재하는지 반복하는 것이 좋습니다.
여기서 우리는 또한 문자 조합에 따라 검색 기능을 구현합니다. 원칙은 다음과 같습니다. 사용자가 키를 누르면 키의 시간을 기록합니다. 두 연속 키 사이의 간격이 1 초 미만인 경우 조합 쿼리로 간주됩니다. 현재 키 값을 이전 키 값에 추가 한 후에는 많이 말하지 않고 코드를 추가하십시오!
Pinyin의 첫 번째 편지를 받으십시오.
var strchinesefirstpy = ""; // 375 polyphonic 단어 var 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 ":"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 ":"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": "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 첫 번째 문자열 배열 함수 makepy (str) {if (typeof (str)! = "String") 새 오류 던지기 (-1, "기능 makepy가 문자열 유형 매개 변수!"); var arrresult = new array (); // (var i = 0, len = str.length; i <len; i ++)에 대한 중간 결과 배열을 저장합니다. {// 유니 코드 var var ch = str.charat (i); // 유니 코드 코드가 처리 범위 내에 있는지 확인하십시오. 그렇지 않은 경우 Arrresult.push (checkch (ch));} // Arrresult를 처리하고, 모든 Pinyin First Let 기능 if (uni> 40869 || uni <19968) return ch; // DECESHITHESH (CH); // 폴리 포닉 단어인지 확인하면 폴리 포닉 단어로 처리됩니다. StrchineseFirstpy String에서 해당 초기 문자를 직접 찾을뿐만 아니라 (Omultidiff [uni]? omultidiff [uni] :( strchinesefirstpy.charat (uni-1968));} 함수 mkrslt (arlt) {} [ ""]; 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;}} else {var tmparr = arrrslt.slice (0); arrrslt = []; for (k = 0; k <strlen; k ++) {// 동일한 arrrsltvar tmp = tmparr.slice (0)를 복사합니다. str.charat (k);} // 복사 된 배열을 Arrrslt arrrslt = arrrslt.concat (tmp)에 연결합니다. } // Pinyin Abbreviation 함수 Query () {var str = document.getElementById ( "txtchinese"). value.trim (); if (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," ") .split (" "); } for (var i = 0; i <names.length; i ++) {if (names [i]! = "") {// pinyin 약어 var arrrslt = makepy (names [i]); // Pinyin과 Chinese 간의 서신을 배열 namelist.push에 추가합니다 (new Array (arrrslt.toString (), names [i]); }}}}검색 코드 실행 :
var timezoneoffset = 0; // 레코드 키 시간 var keycache = ""; // 키보드 문자가 눌려있을 때 검색 문자 조합을 기록하십시오. var tz = new date (). gettime (); // 연속 키 지연 계산, 1000 밀리 초로 설정된 연속 키 지연 계산, 즉 1 초 if (tz -timezoneoffset> 1000) {// 지연은 1 초를 초과하고 다시 타임 ZONEOFFSET = TZ; keycache = 키; } else {// 지연은 1 초 범위 내에 있으며 필터 문자 keycache += key; } // 필터 콘텐츠 길이를 가져옵니다. var keylength = keycache.length; var Word = ""; // 조건을 충족시키는 중국어 단어를 기록하고 검색을 수행하고 (var i = 0; i <namelist.length; i ++) {// 동일한 길이의 문자를 해상하고 필터 문자 조합을 비교하고 (namelist [i] [0] .substr (0, keyength (0, keyength) == keycache) {if (word =+= [i]) {namelist [i]); // 검색 결과를 강조 표시합니다. 기준을 충족시키는 첫 번째 결과는 강조 표시 전에 지우 려야하므로 여기서 두 번째 매개 변수는 다음과 같이 전달됩니다. } else {Word + = "" + namelist [i] [1]; 하이라이트 (namelist [i] [1] .Substr (0, kylength), false); }}} // div var div = document.getElementById ( "divkeyCache")의 필터 문자 조합 표시; if (div) {div.innerhtml = "필터 문자 조합 :" + keycache; }}하이라이트 코드 :
함수 encode (s) {return s.replace (/&/g, "&"). 교체 (/</g, "<"). 교체 (// g, ">"). 교체 (/여 (/여 ,///./*/$/^) : "// $ 1");} 함수 decode (s) {return S.Replace (// 9/*/*/../(/$/^/^] : "$ 1"). grow (//// g, ">"). 교체 (/</g, "<"). 교체 (/&/g, "&");} // "s", "명확한": 이전에 강조 표시된 컨텐츠 하이라이트를 명확하게할지 여부 (s, pare). // alert ( '검색 키워드가 채워지지 않음!'); 거짓을 반환합니다. } s = Encode (s); var obj = document.getElementsByTagName ( "body") [0]; var t = ""; if (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;} 함수 loopsearch (s, obj) {var cnt = 0; if (obj.nodeType == 3) {cnt = replare (s, obj); CNT 리턴; } for (var i = 0, c; c = obj.childnodes [i]; i ++) {if (! c.classname || c.classname! = "Highlight") cnt+= loopsearch (s, c); } return cnt;} 함수 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 {배경 : 빨간색; 글꼴 중량 : 굵게; 색상 : 흰색; 글꼴 크기 : 24px;} </style>HTML :
<body> <form> <table> <td> <span> 중국 문자열을 입력하십시오 : </span> <input type = "text"id = "txtchinese"size = "30"value = "care"> <input type = "button"onclick = "query ()"value = "view pinyin abbreviation"</td> </tr> </table> </table> </table> <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 href = "#uid23"> xu </a> </span> <span> <a href = "#uid23"> wang changfeng </a> </span> <span> <a href = "#uid23"> liu qiyin </a> </span> <span> <a href = "#uid23"> Chen zhixin </span> </span> </span> <a. href = "#uid23"> huang zhihua </a> </span> <span> <a href = "#uid23"> gao yuehua </a> </a> </span> <span> <a href = "#uid23"> li chengxin </a> </span> <a href =#uid23 "> zhae. lin </a> </span> <span> <a href = "#uid23"> liu jian </a> </a> </a> </span> <span> <a href = "#uid23"> wang ying </a> </span> <span> <a href = "#uid23"> bai xikang </a> <a href =#href> jianbo </a> </span> <span> <a href = "#uid23"> lin feng </a> </a> </span> </div> <br/> <br/> <div style = "font-size : 14px; font-weight :"> 이름의 첫 글자를 통해 검색하고, 페이지를 계속 집중시키고, 문자 조합을 계속 누르십시오. 예를 들면 : "Huang Zhihua"를 찾으려면 문자를 지속적으로 누를 수 있습니다.
전체 예제 코드를 다운로드하려면 여기를 클릭하십시오.
JavaScript 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript 검색 알고리즘 및 기술 요약", "JavaScript 전송 운영 기술 요약", "JavaScript 인코딩 운영 기술 요약", "JAS 스크립트 스크립트의 요약", "JavaScript Switching Switching and Seciftion의 요약" JavaScript 오류 및 디버깅 기술 ","JavaScript 데이터 구조 및 알고리즘 기술 요약 "및"JavaScript 수학적 운영 사용 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.