Rev. 2.73

인터넷 사용자의 70퍼센트 이상이 정보검색에 목적을 두고 있으며, 70퍼센트 이상의 방문객이 검색 사이트를 경유하여 방문하고 있다. 이 블로그또한 예외는 아니다. 검색을 통해 방문한 사용자의 편의를 위해 키워드를 강조표시 하는 것을 자바스크립트를 사용하여 구현해 보자. 이것은 구글에 캐시된 문서를 조회할 때 검색어가 강조되는 기능과 동일하다. 방문객이 검색한 키워드를 강조표시하여 문서의 빠른 탐색이 가능하도록 하기 위함이다.

최초 검색엔진 키워드 하이라이트라는 포스트에서 소개한 바 있으며, Scott Yang씨의 코드를 응용한 것이다. 초기 버전은 UTF-8 유니코드만을 지원하였기에 그다지 쓸모가 없었다. 최근 EUC-KR을 UTF-8로 변환하는 Ajax로직을 추가하면서 네이버, 다음, 엠파스 등, EUC-KR기반의 검색 서비스를 통해 접속한 경우에도 키워드가 강조표시 되도록 하였으며, 마이너한 몇몇 버그를 수정하고 검색패턴을 추가하였다.

요구사항 : prototype.js 1.4 이상
다운로드 : http://firejune.com/javascripts/hilight.js

euckr2utf8.php euckr2utf8.php (1.5 KB)

삽입방법 : 다운로드한 hilight.js파일을 열어 this.options의 주석을 참조하여 환경에 맞게 커스터마이즈하여 업로드하고 아래의 코드를 window.onload 이벤트에 넣거나 페이지의 가장 하단에 삽입한다. euckr2utf8.php 파일 또한 적절한 폴더에 업로드한다.

// Find search engine referrer for keyword highlight
if(document.referrer){
  [ '.*search\\.naver.*',
    'search\\.empas.*',
    '.*search\\.daum.*',
    'search\\.paran.*',
    'eolin\\.com/search/',
    'firejune\\.com/search/',  // your blog search pattern

    'google.*',
    '.*search\\.yahoo.*',
    'search\\.msn.*',
    'search\\.live\\.',
    'search\\.aol.*',
    'ask\\.com',
    'altavista.*',
    'feedster.*',
    'search\\.lycos\\.',
    'alltheweb\\.',
    'technorati\\.com/.*',
    'dogpile\\.com/info\\.dogpl/search/web/'
  ].each(function(engine){
    engine = '^http://(www\\.)?' + engine;
    if(document.referrer.match(engine)){
      var script = document.createElement ( 'script' );
      script.type = 'text/javascript';
      script.src = '/javascripts/hilight.js'; // set your javascript path
      document.getElementsByTagName('head')[0].appendChild(script);
      script = null;
      throw $break;
    }        
  });
}

테스트 :
1. 구글 : 검색엔진 키워드 하이라이트
2. 네이버 : 검색엔진 키워드 하이라이트(검색결과가 참 골 때리네요)
3. 야후 : 검색엔진 키워드 하이라이트
4. 다음 : 검색엔진 키워드 하이라이트
5. 이올린 : 검색엔진 키워드 하이라이트

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar