influence/composables/useHangul.js

import Hangul from 'hangul-js'
/*
* 키워드 검색 공통 함수
*/
let hangul = {
  /**
   * 키워드로 입력 시 필터 결과 반환(키보드 입력 이벤트)
   * @param {*} arr 
   * @param {*} keyword 
   * @param {*} filter 대상 키
   * @returns 
   */
  fnGetKeywordResult(arr, keyword, filter){
    let tempList = []
    if (!keyword) {
      // 키워드가 없는 경우 > 키워드 검색결과 빈값
        tempList = []
    }else{
      tempList = this.fnFilterList(arr, keyword, filter)
    }

    let resultObj = {
      arr : _cloneDeep(tempList),                 // 결과 원본 배열
      newArr: this.fnReduce(tempList, filter),    // 결과 중복제거 배열
    }

    return resultObj
  },
  /**
   * 필터 키워드 배열 반환
   * @param {*} arr 필터처리할 배열
   * @param {*} keyword 입력 키워드
   * @param {*} key 필터키값
   * @returns 
   */
  fnFilterList(arr, keyword, filter){
    let tempList = []
    tempList = arr.filter((ele) => {
      if(ele[filter].toLowerCase().indexOf(keyword.toLowerCase()) > -1){
        return true
      }
      return this.fnCho(keyword, ele[filter])
    })

    return tempList
  },
  /**
  * 키워드 > 초성 체크
  * @params keyword 입력키워드
  * @params key 비교할 키값
  * @returns Boolean
  */
  fnCho(keyword, key){
    let result = false
    // 초성 검색(ㅅㄴㅍ)
    let disassemble = Hangul.disassemble(key, true) //2번째 인자로 true를 전달하면 글자마다 독립된 배열을 만들어준다
    // disassemble = [[ㅎ,ㅗ,ㅇ],[ㄱ,ㅣ,ㄹ],[ㄷ,ㅗ,ㅇ]]
    var cho = ''
    for (let i=0,l=disassemble.length; i<l; i++){
      cho+=disassemble[i][0]
    }

    //disassemble의 배열의 첫값을 cho에 첨가한다
    // cho = "ㅎㄱㄷ"
    let isChoSearch = cho.includes(keyword)
    if(isChoSearch){
      result= true
    }
    return result
  },
  /**
   * 중복 카운팅 후 새로운 배열 반환
   * @param {*} arr 
   * @param {*} key 
   * @returns 
   */
  fnReduce(arr, key){
    const result = arr.reduce((accu, item) => {
      const index = accu.findIndex(elem => elem.title === item[key]);
      if (index !== -1) {
        // 중복 count계산
        accu[index].count++;
      } else {
        accu.push({ value: key, title: item[key], count: 1 });
      }
      return accu;
    }, []);
  
    return result;
  },
  /**
   * 입력한 키워드로 검색 시, 결과 반환(검색버튼 또는 엔터 액션)
   * @param {*} arr1 배열
   * @param {*} keyword 
   * @returns 
   */
  fnSearchResultList(arr1, keyword){
    let findSearch = []
    // 발전소명
    let sl1 = arr1.filter(ele => ele.title == keyword)
    if(sl1.length > 0) findSearch = sl1

    return findSearch
  },
  /**
   * 키워드 입력 폼 > 일치하는 문자열 font color설정
   * @param {*} title 키워드 결과 리스트 항목명
   * @param {*} keyword 입력키워드
   * @returns 
   */
  fnSetHighlightKeyword(title, keyword){
    let text = _isNumber(title) ? JSON.stringify(title) : title
    if (!keyword) return text // 키워드가 없으면 그대로 반환
    const regex = new RegExp(`(${keyword})`, 'i');  //첫번째로 일치하는 문자에 대한 정규식
    const match = text.match(regex)
    if (match) {
      const index = match.index
      return text.substring(0, index) +
                `<span style="color: #2da9d6;">${text.substring(index, index + keyword.length)}</span>` +
                text.substring(index + keyword.length)
    } else {
      return text
    }
  },
}

export default hangul