javascript 获取搜索引擎关键字并高亮显示

获取搜索引擎关键字并高亮显示能很大程度的提高用户体验,方便用户迅速找到自己需要的相关信息。本文介绍的是用客户端的 javascript 代码来实现这一目的。

示例:

您可以在 google 里搜索 "codebit.cn Javascript 锚点 平滑跳转" ,然后点击跳往本站的链接即可看到效果。

 
<script type="text/javascript">
<!--
// 说明:获取搜索引擎关键字并高亮显示
// 整理:http://www.CodeBit.cn

/* http://www.kryogenix.org/code/browser/searchhi/ */
/* Modified 20021006 to fix query string parsing and add case insensitivity */
function highlightWord(node,word) {
	// Iterate into this nodes childNodes
	if (node.hasChildNodes) {
		var hi_cn;
		for (hi_cn=0;hi_cn<node.childNodes.length;hi_cn++) {
			highlightWord(node.childNodes[hi_cn],word);
		}
	}
	
	// And do this node itself
	if (node.nodeType == 3) { // text node
		tempNodeVal = node.nodeValue.toLowerCase();
		tempWordVal = word.toLowerCase();
		if (tempNodeVal.indexOf(tempWordVal) != -1) {
			pn = node.parentNode;
			if (pn.className != "searchword") {
				// word has not already been highlighted!
				nv = node.nodeValue;
				ni = tempNodeVal.indexOf(tempWordVal);
				// Create a load of replacement nodes
				before = document.createTextNode(nv.substr(0,ni));
				docWordVal = nv.substr(ni,word.length);
				after = document.createTextNode(nv.substr(ni+word.length));
				hiwordtext = document.createTextNode(docWordVal);
				hiword = document.createElement("span");
				hiword.className = "searchword";
				hiword.appendChild(hiwordtext);
				pn.insertBefore(before,node);
				pn.insertBefore(hiword,node);
				pn.insertBefore(after,node);
				pn.removeChild(node);
			}
		}
	}
}

function googleSearchHighlight() {
	if (!document.createElement) return;
	ref = document.referrer;
	if (ref.indexOf('?') == -1) return;
	qs = ref.substr(ref.indexOf('?')+1);
	qsa = qs.split('&');
	for (i=0;i<qsa.length;i++) {
		qsip = qsa[i].split('=');
		if (qsip.length == 1) continue;
		if (qsip[0] == 'q' || qsip[0] == 'p') { // q= for Google, p= for Yahoo
			words = unescape(decodeURIComponent(qsip[1].replace(/+/g,' '))).split(/s+/);
			for (w=0;w<words.length;w++) {
				highlightWord(document.getElementsByTagName("body")[0],words[w]);
			}
		}
	}
}

window.onload = googleSearchHighlight;

//-->
</script>

同时,您需要为要高亮的关键词设置一个样式:

 
<style type="text/css">
.searchword {
	background-color: yellow;
}
</style>

实现原理:

在页面加载完成时获取页面来源(document.referrer),并分析搜索引擎关键词,然后获取页面上所有元素,递归查询是否含有搜索关键字,如果有,就创建一个 span 元素,并应用关键词样式,替换原有节点。