Script / CSS

G1sUtil.js

G1sBlogger.js

G1sNavigationList.js

G1sCode

G1sTagList

Posts List

2017년 6월 10일 토요일

[Javascript] 초성검색을 구현해보자 - with Hangul.js

이번 프로젝트에서 제 파트는 아니지만 초성검색을 Javascript로 구현해야 하는 요건이 있어서 구글링을 한 결과,
힌트를 주는 블로그는 몇개 있으나 구현되어 있는 소스가 없어 한번 만들어 보았습니다.

마침 Github에 공유 된 Hangul.js 라는 훌륭한 라이브러리가 있어 해당 라이브러리를 사용하였습니다.
Hangul.jsMIT 라이센스를 따르고 있네요.
MIT 라이센스는 가장 제약이 적은 라이센스로 저작권 표시 의무만을 가지고 있습니다.
라이센스 링크는 https://github.com/e-/Hangul.js/blob/master/LICENSE 입니다.


우선 Hangul.js는 한글을 분해/조립하는 disassemble, assemble 함수를 기본으로 동작하는 라이브러리로 search 함수를 제공하고 있습니다.
이 search 함수에 대해서 살펴보면...
우선 라이브러리의 REDME 에는 아래와 같이 설명하고 있습니다.

Hangul.search(a:string, b:string)는 문자열 a가 문자열 b를 포함하는지 검사합니다. 이때 포함관계는 '두벌식 키보드 기준으로 a문자열을 입력할 때 누르는 키들의 배열이 b문자열을 입력할 때 누르는 키들의 배열을 포함한다'로 정의합니다. 반환값이 0보다 크거나 같다면 포함합니다.
https://github.com/e-/Hangul.js#hangulsearch

즉, 검색어 'ㄷ'로 검색을 하였을 경우,
'닭'과 같이 초성의 결과를 검색이 가능하지만, '갇' 과 같이 값이 종성에 있을 경우에도 검색이 됩니다.

또한 초성이 두개이상인 검색어 'ㄷㄱ'에 대해,
초성 검색을 통해 '달걀'을 검색 할 수 없으며, 오히려 '갇가'와 같은 의도치 않은 결과가 검색 될 수 있습니다.

이에따라 해당 함수를 수정해 초성검색이 가능하도록 만들어 보았습니다.

제가 만들고자 하는 초성검색 기능은 다음과 같습니다.

  • 검색어가 초성으로만 이루어져 있을 경우 초성검색을 한다.
  • 검색어가 초성으로만 이루어져 있지 않을 경우 기존 Hangul.search 기능을 사용한다.
  • 초성검색은 문자의 초성만 추출한 후 검색어의 초성과 indexOf를 통해 판단한다.

간단하게 정리가 되네요.

위 조건을 만족하기 위해서 필요한 로직은 세가지로, 아래와 같습니다.
- 문자열이 초성으로만 이루어져있는지 판단한다. -> Hangul.isConsonant 이용
- 한글 검색 - Hangul.search
- 문자열의 초성만 추출 - Hangul.disassemble 이용

기존 Hangul.js로 모두 해결이 가능하군요.
자세히 설명하기에는 너무 길어 질 것 같구요.
수정한 Hangul.js 소스는 아래 링크를 참고하시기 바랍니다.

수정 소스 : https://github.com/g1s/Hangul.js/blob/master/hangul.js
수정 내역 : https://github.com/g1s/Hangul.js/commit/e1db92721a1e4cc98c4ef15337c2f8a9c29ebced

이를 사용하는 샘플소스는 다음과 같습니다.


샘플열기

댓글 없음:

댓글 쓰기