초성검색예

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>초성검색</title>
</head>
<body>
    <form>
        <input type="text" onkeyup="schHangul(this.value)">
    </form>
    <div id="ul"></div>
    <script>
        // 문자열 초성으로 변환
        function cho(str){
            var res = "", // 초성으로 변환
            choArr = ["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"];
            for (var i in str) {
                code = Math.floor((str[i].charCodeAt() - 44032) / 588)
                res += code >= 0 ? choArr[code] : str[i];
            }
            return res;
        }

        var compars = ["홍길동", "한국", "호가든", "프로그램목록", "프로세스", "공통", "아키텍쳐", "앙칼지다", "학사행정", "일반부속", "학습 및 취업", "테이블정의서", "테이저건", "정의서", "현행화", "졸업", "바인더", "대학본부", "에디터", "Visual Studio Code", "Edit Plus", "소나무", "민들레", "나뭇가지", "갑천", "한강", "금강", "도안동", "월평동", "대전광역시", "서울", "경기도", "성남시", "모니터", "이클립스", "탐색기", "엑셀", "크롬", "파이어폭스", "텔레그램", "팟플레이어", "마이크로소프트", "애플", "LG", "삼성", "오라클", "MySQL", "치약", "프린터", "레이저 프린터", "아반떼", "베라크루즈", "자동차공학과", "기아자동차", "현대자동차", "에어컨"]; // 검색 데이터

        function schHangul(str) {
            document.getElementById("ul").innerHTML = "";
        searchArr = str, // 검색어
        res = []; // 검색 결과

            var searchArr = searchArr.split('|');

            searchArr.forEach((search, t) => {

                var searchCho = cho(search);

                /*
                    1. 검색어와 비교문자열 모두 초성으로 변환시킨다.
                    2. 비교할 문자열에서 검색한 문자열이 포함될 수 있는 위치의 인덱스를 모두 구해온다.
                    3. 구한 인덱스들을 반복 시키면서 비교문자열에서 해당 인덱스 위치 부터 검색어의 길이만큼 가져온다 -> 초성으로 바꾼 검색어와 같은 문자열이 나옴
                    4. 검색어가 초성이 아닌 글자의 인덱스를 찾고
                    5. 초성으로 변환한 비교 문자열의 위에서 나온 인덱스의 문자를 원본 비교문자로 치환
                    6. 5번 결과의 문자열과 원본 검색어를 비교해 일치 시 반환
                */

                compars.forEach((compare, i) => {

                    var compCho = cho(compare); // 비교문자의 초성
                        strIdxs = [], // 비교문자열에서 검색어와 일치하는 부분의 시작 위치
                        compare = compare.split(''); // 비교문자

                    for (var c in compCho) { // 검색어, 비교문자를 초성으로 변환후 일치하는 부분 모두 찾기
                        /*
                            쉽게말해
                            비교할 문자 : ㄱㄱㄱㄱㄱㄱㄱ
                            검색어 : ㄱㄱㄱㄱ일때
                            검색어가 비교할 문자열에 몇번째 문자열에 포함될 수 있는지 모두 구해옴
                            0,1,2,3 번째 문자열에 들어갈 수 있음
                        */
                        var idx = compCho.indexOf(searchCho, c); // 일치하는 부분의 인덱스

                        if (idx != -1 && strIdxs.indexOf(idx) == -1)
                            strIdxs.push(idx);
                    }
                    chk = 0;

                    strIdxs.forEach((idx, d) => {

                        var str = searchCho.split('');

                        for (var e in search) {
                            if (search[e].charCodeAt() - 44032 >= 0) // 검색어중에 초성이 아닌부분
                                str[e] = compare[idx + e * 1]; // 초성변환 전의 문자로 치환
                        }

                        if (str.join('') == search) { // 비교문자
                            chk = 1;
                            for(var q = idx; q < idx + search.length; q++)
                                compare[q] = `<span style='background: yellow'>${compare[q]}</span>` // 비교문자 하이라이트
                        }
                    })

                    if (chk)
                        res.push(compare.join(''));
                })
            })

            res.forEach((el, ix) => {
                document.getElementById("ul").innerHTML += "<li>"+el+"</li>"
            })
        }


   //출처
   /*
   https://wmsttks.tistory.com/28
    https://stove99.tistory.com/221
   */


    </script>
</body>
</html>