Javascript 초성검색 하이라이트

Javascript 초성검색 하이라이트

javascript로 초성검색과 검색 결과 하이라이트를 만들었다.
어렵다..
초성검색만 하면 하이라이트는 어렵지 않은 것 같다.
console.log로 값을 확인 하면서 보길..
다음에 더 자세히 설명해 포스팅하겠다..ㅜㅜ

구현하기

원리는 데이터와, 검색어를 모두 받아와 초성으로 변환 후
데이터에서 초성으로 바꾼 검색어가 들어 갈 수 있는 모든 값을 가져온다 - **참고
찾은 데이터와 검색어를 비교후 검색어가 초성이 아닌경우
같은 위치에 있는 데이터의 초성을 초성 변환전의 원본 글자로 치환한다.
그후 두 단어 비교후 일치시 반환 하는 것이다.

** 검색 데이터 = "가나다/가누다/가내다", 검색어 = "가ㄴ다" 초성 변환시 검색어가 검색데이터 처음에 나오는 ㄱㄴㄷ, 두번째 ㄱㄴㄷ, 세번째 ㄱㄴㄷ에 들어갈 수 있음으로 모두 가져온다.

* jquery연결 필요!

window.dd = console.log;
 
// 문자열 초성으로 변환
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 = ["가나다라", "나다", "가나", "가", "다다두다", "두두두다다다", "다라", "ㄷㄷ"], // 검색 데이터
    searchArr = 'ㄷㄷ두다', // 검색어
    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>"
})