Javascipt高亮显示关键词，或添加链接-优快云博客

本文介绍了一种在网页中自动高亮显示来自搜索引擎的关键词的方法。通过解析referrer中的查询参数来确定关键词，然后遍历DOM查找并高亮显示这些关键词。此方法可以提升用户体验，使用户更快地找到所需信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现原理：

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

<script>
var allCount=0;

function highlightWord(node,word,realUrl) {

      // Iterate into this nodes childNodes
	if (node.hasChildNodes&&allCount<4) {
		var hi_cn;
		for (hi_cn=0;hi_cn<node.childNodes.length;hi_cn++) {
			highlightWord(node.childNodes[hi_cn],word,realUrl);
		}
	}
    // And do this node itself

    if (node.nodeType == 3) { // text node
		tempNodeVal = node.nodeValue.toLowerCase();
		tempWordVal = word.toLowerCase();
		if (tempNodeVal.indexOf(tempWordVal) != -1&&allCount<4) {
			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("a");
				hiword.className = "searchword";
				hiword.setAttribute("href",realUrl);
				hiword.appendChild(hiwordtext);
				pn.insertBefore(before,node);
				pn.insertBefore(hiword,node);
				pn.insertBefore(after,node);
				pn.removeChild(node);
				allCount++;
			}
		}
      }

}

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]);
				}
			}
      }

}

function testAddlink() {
		var wordList = new Array("用户","命令"); 
		var linkList=new Array("http://www.116tea.cn","http://www.iteye.com","http://www.163.com");
		for (w=0;w<wordList.length;w++) {
			allCount=0;
			highlightWord(document.getElementsByTagName("body")[0],wordList[w],linkList[w]);
		}
} 
window.onload = testAddlink;

</script></html>