그누에서 보았던것 같기도 하고, 아닌것 같기도 하고 어쨋든 우연하게 알게된 markjs 프레임워크 상당히 괜찮네요.

보통 게시판등에서 검색을 하고나면 검색어에 대해서 하이라이팅을 해주자나요.

물론 단순히 PHP로 정규식써서 치환해주면 심플한데... 이 방법이 위지윅에디터랑 결합되면 태그가 있는 문자열에서 검색어를 하이라이팅하게 되면서 태그가 깨지는등의 문제가 발생할 수 있어서 그동안 본문에 대해서는 검색어 하이라이팅을 안하고 있었어요.

그러던중 markjs 를 테스트 해봤는데 딱 제가 원하는 기능들이 다 구현되어 있네요.

1. 태그를 건너띄워 검색이 될것

예를들어 위지윅에디터라 내용이 <b>그누</b>보드 라고 입력되었고, 검색어가 그누보드일때,

(저같은경우엔 Fulltext 검색 인덱스 만들때 태그를 벗겨내고 인덱스를 만들기 때문에 검색어로 그누보드를 검색하게 되면 본문에 <b>그누</b>보드 가 검색이 됩니다.)

<b>그누</b>보드도 하이라이팅 되어야 한다는거죠.

2. 태그안에 있는 키워드를 하이라이팅 하지 않을 것

예를들어 내용이 <a href="어쩌고저쩌고?q=그누보드">그누보드보기</a> 일때, PHP로 바로 치환하게 되면 href=" " 사이에 있는 그누보드란 글자도 치환하려고 하면서 태그가 깨지는 경우가 있자나요? 그것을 방지해야한다는거죠.

3. 원하는 영역내에서만 하이라이팅 될것

PHP에서 제목이나 본문에서 바로 치환하면 발생되지 않는 경우지만, 자바스크립트로 하이라이팅을 하면 제목과 본문에 관계없는 다른 사이트 구성요소들도 치환될 수 있자나요. 사이트 메뉴에 있는 글자도 치환되어 버린다던가 하는...

그래서 딱 원하는 영역 (본문을 감싸는 컨테이너 내부라던가, 제목링크 내부라던가)에서만 하이라이팅이 되어야한다는 거죠.

4. 키워드내 띄워쓰기를 기준으로 각각 하이라이팅 해줄것

예를들어 키워드가 "그누 보드" 라면 저같은 경우엔 그누가 있거나, 보드가 있거나를 Fulltext로 검색해서 보여줘서 그누 안녕 보드 같은게 검색에 걸린단 말이죠.

그럴 경우에 그냥 "그누 보드" 를 하이라이팅하라! 라고 하면 그누 랑 보드랑 따로따로 하이라이팅해주어야 한다는 거죠.

위의 4가지 조건이 다 만족하나 테스트를 해봤는데

완벽하게 만족하네요. <b>안</b>녕 도 강조해주고

태그내부에 있는건 치환히지 않으면서 특정영역(#test)에서만 치환.

덕분에 본문내용에 키워드를 하이라이팅해주기 매우 편리해졌습니다.

프레임워크에 대한 자세한 소개는 https://markjs.io 를 참고하시면 되겠습니다! ㅎㅎ