Rev. 2.73

자바스크립트로 만들어진 검색엔진 키워드 하이라트입니다. UTF-8 유니코드를 지원하는 검색엔진에서 링크되어 온 경우 방문객이 키워드를 알아보기 쉽도록 리퍼러를 분석하여 하이라이트(강조)합니다. 외국 사이트에서는 심심찮게 사용되고 있으며, 구글검색의 '저장된 페이지'에서 경험해 보셨을 겁니다.

국내 대표 포털사이트 네이버, 다음, 야후코리아, 엠파스, MSN한국 등은 하나같이 EUC-KR을 사용하고 있으므로 자바스크립트로는 분석이 어려운 실정입니다. 영문이야 상관없습니다만,(귀찮은 짓은 안하겠습니다.) 구글, 야후닷컴, MSN, AOL, Altavista, feedster, lycos 등은 UTF-8 URI를 사용함으로 이를 통해 연결된 경우에 스크립트가 발동합니다. 아래의 링크에서 직접 확인해 보세요.

구글의 테스트 주소(키워드 : firejune, 자바스크립트, 하이라이트, 웹표준, HTML)

이 자바스크립트는 Scott Yang씨가 최초로 작성하였으며 현재 'Search Engine Keyword Highlight'라는 이름으로 배포되고 있습니다. 이 곳에 소개된 코드는 한글을 지원하게 하고 아무곳에나 쑤셔넣기(?) 좋게 커스터마이징 한것이며 기본설계는 동일합니다. 별도의 라이브러리를 필요로 하지 않으며, 스타일시트와 몇몇 변수를 조정해주면 쉽게 추가할 수 있습니다. (당연히 UTF-8환경에서만 작동합니다.)

// Search Engine Keyword Highlight (http://fucoder.com/code/se-hilite/)
// @author Scott Yang <http://scott.yang.id.au/ > @version 1.3
// @after customized by Firejune <http://firejune.com >
var Hilite = {
max_nodes: 1000, // 하이라이트 될 노드의 최고 수
style_name: 'hilite', // 스타일시트의 이름
debug_referrer: '',
search_engines: [
['^http://(www)?\\.?google.*', 'q='],
['^http://search\\.yahoo.*', 'p='],
['^http://search\\.msn.*', 'q='],
['^http://search\\.aol.*', 'userQuery='],
['^http://(www\\.)?altavista.*', 'q='],
['^http://(www\\.)?feedster.*', 'q='],
['^http://search\\.lycos.*', 'query=']
],
hilite: function(elementid){
if(document.referrer.indexOf(document.domain) != -1
|| !document.referrer) return
var q = this.debug_referrer ? this.debug_referrer : document.referrer
var e = null
q = this.decodeReferrer(q)
if (q && ((elementid && (e = document.getElementById(elementid)))
|| (e = document.body)))
this.hiliteElement(e, q)
},
decodeReferrer: function(referrer){
var query = null
var match = new RegExp('')
for (var i = 0; i < this.search_engines.length; i ++) {
match.compile(this.search_engines[i][0], 'i')
if (referrer.match(match)) {
match.compile('^.*'+this.search_engines[i][1]+'([^&]+)&?.*$')
query = referrer.replace(match, '$1')
if (query) {
query = decodeURIComponent(query)
query = query.replace(/\'|"/, '')
query = query.split(/[\s,\+\.]+/)
return query
}
}
}
return null
},
hiliteElement: function(elm, query){
if (!query || elm.childNodes.length == 0) return
var qre = new Array()
for (var i = 0; i < query.length; i ++) {
query[i] = query[i].toLowerCase()
qre.push(query[i])
}
qre = new RegExp(qre.join("|"), "i")
var stylemapper = {}
for (var i = 0; i < query.length; i ++)
stylemapper[query[i]] = this.style_name+(i+1)
var textproc = function(node) {
var match = qre.exec(node.data)
if (match) {
var val = match[0]
var k = ''
var node2 = node.splitText(match.index)
var node3 = node2.splitText(val.length)
var span = node.ownerdocument.createElement('SPAN')
node.parentNode.replaceChild(span, node2)
span.className = stylemapper[val.toLowerCase()]
span.appendChild(node2)
return span
} else return node
}
this.walkElements(elm.childNodes[0], 1, textproc);
},
walkElements: function(node, depth, textproc){
var skipre = /^(script|style|textarea)/i
var count = 0
while (node && depth > 0) {
count ++
if (count >= this.max_nodes) {
var handler = function() {Hilite.walkElements(node, depth, textproc)}
setTimeout(handler, 50)
return
}
if (node.nodeType == 1) {
if (!skipre.test(node.tagName) && node.childNodes.length > 0) {
node = node.childNodes[0]
depth ++
continue
}
} else if (node.nodeType == 3) node = textproc(node)
if (node.nextSibling) node = node.nextSibling
else {
while (depth > 0) {
node = node.parentNode
depth --
if (node.nextSibling) {
node = node.nextSibling
break
}
}
}
}
}
}

// 사용하기
Hilite.hilite('content') // 컨텐츠를 둘러싸고 있는 엘리먼트의 ID(온로드 이벤트 핸들러에 추가)

// 스타일 시트
.hilite1 { background: #fcc }
.hilite2 { background: #cfc }
.hilite3 { background: #ccf }
.hilite4 { background: #ffc }
.hilite5 { background: #fcf }
.hilite6 { background: #cff }

덧(2007-5-12). 코드가 업데이트 되었습니다.
1. 무한 루프 버그수정.
2. 영문과 한글이 섞인경우 키워드를 발췌하지 못하던 버그 수정
3. 검색엔진 추가 : live.com, ask.com, alltheweb.com, technorati.com, dogpile.com, eolin.com
4. 함수 클래스화
5. euc-kr 지원(Ajax 사용)
6. euc-kr 기반 검색엔진 추가 : naver.com, empas.com, daum.net, paran.com
7. 자체사이트 검색 추가

다운로드 : http://firejune.com/javascripts/hilight.js

Comments

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

Your Reaction Time!

captcha

avatar