`
julyboxer
  • 浏览: 220927 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Javascipt高亮显示关键词,或添加链接

    博客分类:
  • AJAX
阅读更多

实现原理:

在页面加载完成时获取页面来源(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>

 

 

分享到:
评论

相关推荐

    轻松学用JAVASCIPT编程(教程)

    总之,"轻松学用JAVASCIPT编程"教程将带你探索JavaScript的基础和进阶知识,涵盖从变量、控制结构到函数、对象,再到DOM操作、异步编程和模块化。通过学习,你将能够熟练运用JavaScript进行网页动态效果的实现,提升...

    Prism 轻量级的Javascript代码高亮插件.rar

    目前它已内置了 HTML\CSS\Javascript 三种语言的高亮支持,你也可以添加新的语法高亮配置文件,只需修改 Javascipt 和 CSS 文件就行。除此之外,它也提供了额外的插件功能,让你可以新增其它功能,比如自动转换链接...

    javascipt地图

    6. **地图交互效果**:在描述中提到的“低级区高亮显示相关”,这可能是指当用户点击一个高级行政区(如省或州)时,其下属的低级行政区(如县或市)会高亮显示。这可以通过JavaScript实现,通过遍历和操作数据结构...

    Javascipt语言手册.chm

    Javascipt语言手册.chm

    JavaScipt权威指南

    JavaScipt权威指南

    javascipt js base64 js文件

    javascipt js base64 js文件

    javascipt拓扑图

    9. **工具提示和悬停效果**:为节点和连接线添加工具提示,可以提供额外信息,而悬停效果则可以突出显示当前选中的元素。 10. **导出和保存**:提供将拓扑图导出为图片或PDF的功能,方便用户保存和分享。 学习和...

    html转javascipt 开发很有帮助

    html转javascipthtml转javascipthtml转javascipthtml转javascipt

    实用Javascipt源码----下拉式菜单的搜索.rar_下拉式菜单

    - 添加清除搜索功能,允许用户一键清除输入框内容并恢复所有选项。 - 确保搜索是区分大小写的,或者提供一个开关让用户选择是否区分大小写。 - 在用户输入时高亮匹配的部分,提供更好的视觉反馈。 通过分析并理解这...

    javascipt/H5飞机大战

    javascipt写的飞机大战,用键盘操作,上下左右箭头操作飞机方向,空格键放炮炮弹,适合初学者学习研究。 该游戏使用HTML5 Canvas元素进行绘制,玩家可以通过键盘控制飞机移动和发射子弹,击败敌机并获得分数。 ...

    javascipt入门

    作为“javascipt入门”的学习资料,我们将会深入探讨JavaScript的基础知识,包括语法、变量、数据类型、控制结构、函数、对象、数组、DOM操作以及事件处理等核心概念。 1. **基础语法**:JavaScript是一种弱类型、...

    javascipt和css特效

    在JavaScript中,我们可以通过`document.getElementById`、`document.querySelector`或`document.querySelectorAll`等方法选取DOM元素,然后使用`.style`属性改变其CSS样式。CSS选择器也变得更加强大,如伪类选择器`...

    arcgis api for javascipt专题图

    5. **添加图层至地图**:将创建好的图层添加到MapView 中,使其显示在地图上。 6. **事件监听**:可以添加事件监听器,例如点击事件,以便用户与专题图进行交互。 7. **更新和刷新**:当数据变化时,需要更新图层...

    javascipt教程

    使用`var`、`let`或`const`关键字声明。 - 数据类型:包括基本类型(如字符串、数字、布尔、null、undefined)和引用类型(如对象)。 - 运算符:包括算术运算符、比较运算符、逻辑运算符等,用于处理数据和执行...

    javascipt和CSS实现仿苹果系统导航菜单

    3. **悬停效果**:当鼠标悬停在菜单项上时,我们可以改变背景颜色或添加下划线,以提供视觉反馈。 4. **动画**:为了增加交互感,可以使用CSS过渡或关键帧动画实现平滑的高亮效果。 其次,JavaScript是实现动态交互...

    在一个input框中显示当前的年月日,当鼠标放上去时变换为当前时间显示

    `当鼠标离开时调用`gd`函数,恢复年月日的显示。 #### 三、高级知识点 **知识点6:使用现代JavaScript语法** 现代JavaScript(ES6+)提供了更简洁的语法来实现同样的功能: ```javascript const it = document....

    javascipt中的hashtable

    在javascript也有类似于C#的hashtable来保存和检索对象,并且有相应的put,get,containsKey,containsValue,clear等方法,具体可以参考文件中的链接

    javascipt资料教程

    1. 添加交互行为:通过响应用户的点击、页面加载等事件,JavaScript 可以改变页面内容、弹出警告框或者执行其他操作。 2. 动态文本和HTML元素:可以使用`document.write`或DOM操作方法动态生成和修改HTML元素的内容...

    javascipt入门(ppt)

    总的来说,JavaScript 是Web开发不可或缺的一部分,它用于创建交互式的网页,处理用户输入,控制网页内容,以及实现各种动画效果和功能。学习JavaScript 对于想要从事前端开发或者对网页动态效果感兴趣的初学者来说...

    《javascipt王者归来》

    5. **框架与库**:可能会涉及React、Vue或Angular等流行前端框架,以及jQuery等库的使用方法和最佳实践。 6. **性能优化**:讲解如何编写高效、可维护的代码,避免内存泄漏,以及如何利用工具进行性能分析。 7. **...

Global site tag (gtag.js) - Google Analytics