게시판 검색 - 검색어 하일라이트

전체 소스코드 : https://github.com/imtaekh/my_app/tree/9f46aeefad36f701b0db8e3348c4ead2489b525a

테스트 사이트 : https://azure0777board.herokuapp.com

게시판 검색의 마지막 포스팅은 검색어 highlight입니다. 검색이 제대로 되고 있는지 쉽게 알 수 있죠.

searchType에 맞춰서 제목, 본문, 작성자의 이름에 검색어가 일치하는 부분을 자바스크립트를 써서 highlight합니다.

routes/posts.js입니다.

어차피 검색기능의 일부니까, search object를 만들때 highlight를 같이 보내줍니다. 

이미 index, show action에서 이 object를 view로 쏴주고 있으니, 해당 view에서 data를 이용해 주기만 하면 됩니다.

title, body, author가 표시되는 부분에 highlight class를 추가해 주고, data-highlight속성에 highlight할 text를 넣습니다.

highlight class를 찾아서 highlight해 주는 javascript를 만듭니다.

기본 원리는 해당 text를 찾아서 <span class='searchHightlight'></span>를 씌워주는 건데, 7,8번째 줄은 html 삽입을 막는 용도로 쓰였습니다. 현재 게시판 본문, 제목등에 html 코드를 직접 입력하더라도 적용되지 않게 되어 있는데, span를 넣어야 해서 <를 &lt;로, >를 &gt;로 바꾸어 주는 것이죠.

regex match를 한 결과는 배열로 나오는데, 동일한 결과도 같이 나오니까 같은 결과값은 지우는 distinct함수를 만들었습니다.

예를들어 match결과가 ["test","Test","test"]인 경우 ["test","Test"]로 중복 결과를 지우는 역할입니다.

newText = newText.replace(new RegExp(match, "ig"), "<span class='searchHighligt'>"+match+"</span>");로 한번에 하지 않는 이유는..

본문의 대소문자를 유지하기 위해서 이런 방법을 택했습니다.

searchText가 "test"인 경우 위의 방법으로 치환하게 되면, 본문의 글자가 "test" 인 경우 뿐만 아니라 "Test" 나 "TEST" 인 경우에도 모두 "test"로 바꿔버리게 되죠. 더 깔끔한 방법 아시는 분은 제보 바랍니다.

이 js파일을 head에 넣어주면 끝입니다.

참고로 highlight.js는 IE9이상에서만 작동합니다. IE빨리 다 사라졌으면 좋겠어요 ㅠㅠ

검색기능은 이걸로 끝입니다. (작성자 이름 클릭해서 검색하는 기능은 나중에...)

[출처] [Node.js 강좌] 게시판 검색 기능 - 3 - 검색어 하일라이트|작성자 azure0777