jQuery实现高亮显示网页关键词的方法

本文实例讲述了jQuery实现高亮显示网页关键词的方法。分享给大家供大家参考。具体如下：

这是一款基于jquery实现的高亮显示网页上搜索关键词的代码，当你在文本框中输入的时候，如果下面的正文中包括你输入的内容，也就是关键字，那么这些关键字是会高亮显示的，被动态添加成黄色，看上去很醒目，就像百度快照显示关键词的样子。

运行效果如下图所示：

具体代码如下：

！DOCTYPE html heart heta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8' /titlejquery文字高亮显示/titlestyle type='text/css ' .高亮显示{底色： # fff 34d-moz-border-radius : 5px；/* FF1 */-web套件-边框-半径： 5px/* Saf3-4 */边界半径： 5px/* Opera 10.5，IE 9，Saf5，Chrome */-moz-box-shadow : 0 1px 4px rgba(0，0，0，0.7)；/* FF3.5 */-web kit-box-shadow : 0 1px 4px rgba(0，0，0，0.7)；/* Saf3.0，Chrome */box-shadow : 0 1px 4px rgba(0，0，0，0.7)；/* Opera 10.5，IE 9.0 */} .突出显示{ padd :1 px 4px margin :0-4px；}/style/headdy search :输入类型=' text ' id=' text-search '/pt这些可以包括网页设计、网页内容开发、客户端联络、客户端/服务器端脚本编写、网页服务器和网络安全配置以及电子商务开发。然而，在网专业人士中，“网页开发"通常指的是构建网站的主要非设计方面：编写标记和编码网络.开发可以从开发最简单的纯文本静态单页到最复杂的基于网的互联网应用程序、电子商务或社交网络服务/p(来自维基百科的文本)脚本类型=' Text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' Text/JavaScript ' jquery。fn。highlight=function(pat){ function innerHighlight(node，pat){ var skip=0；if(节点。nodetype==3){ var pos=node。数据。touppercase().索引属于(帕特)；if(pos=0){ var span node=document。创建元素(“span”)；跨度节点。类名='高亮'；var middlebit=节点。split text(pos)；var结束位=中间位。splittext(pat。长度)；var middleclone=middlebit。克隆诺得(真)；跨度节点。append child(middleclone)；米德尔比特。父节点。替换子节点(span节点，middlebit)；skip=1；} } else if(节点。nodetype==1个节点。子节点！/(脚本|样式)/I . test(节点。标记名)){ for(var I=0；I节点。子节点。长度；I){ I=内部高光(节点。子节点[I]，pat)；} }返回跳过；}返回这个。每个(函数(){ innerHighlight(this，pat。touppercase())；});};jquery。fn。remove highlight=function(){ function new normalize(node){ for(var I=0，children=node.childNodes，nodeCount=children . lentii nodeCountI){ var child=children[I]；如果(孩子。nodetype==1){ new normalize(子级)；继续；} if (child.nodeType！=3) {继续；} var next=child . nextsiblingif(next==null | | next . nodetype！=3) {继续；} var combined _ text=child。下一个节点值。节点值；new _ node=node。ownerdocument。createtextnode(组合_ text)；node.insertBefore(new_node，child)；node.removeChild(子级);node.removeChild(下一个);我-；nodeCount-；} }返回this.find('span.highlight ')。每个（函数(){ var this parent=this。父节点；这位家长。替换child(这个。第一个孩子，这个)；新normalize(此父级)；}).end()；};/script script type=' text/JavaScript ' $(function(){ $(' # text-search ')).绑定(' keyup change '，函数(ev) { //拉入新值var searchTerm=$(this).val()；//删除所有突出显示的旧术语$(“正文”).移除突出显示()；//如果为空，禁用突出显示if (searchTerm ) { //突出显示新术语$(“正文”).突出显示（搜索术语);} });});/脚本/正文/html希望本文所述对大家的jquery程序设计有所帮助。