jQuery突出网页关键词的方法

本文介绍了jQuery实现网页关键词的方法，供大家参考：

这是一个基于jQuery实现的网页搜索关键词高亮显示代码，当你输入文本框时，如果你输入的内容包括以下文字，也是关键字，所以关键是要突出动态添加黄色，看起来非常醒目，像百度快照关键词显示。

运行效果如下图所示：
具体代码如下：
jQuery文本亮点

{。突出
背景颜色：# fff34d；
-moz边界半径：5px FF1 +； / * * /
WebKit的边界半径：5px saf3-4； / * * /
边界半径：5px； / *歌剧10.5，IE 9，saf5，铬。
-moz盒阴影：0 1px 4px RGBA（0, 0, 0，0.7）； / * * / ff3.5 +
Webkit框阴影：0 1px 4px RGBA（0, 0, 0，0.7）； / * * / saf3.0 +铬
盒子的影子：0 1px 4px RGBA（0, 0, 0，0.7）； / * 10.5 + 9 *歌剧IE
}
{。突出
填料：1px 4px；
保证金：0 4px；
}
搜索：
这包括Web设计、Web内容开发、客户联系、客户端/服务器端脚本、Web服务器和网络安全配置以及电子商务、开发。然而，在Web专业人员中，Web开发通常指构建Web站点的主要非设计方面：编写标记和编码。网站开发可以从开发简单的静态单页纯文本到最复杂的基于Web的互联网应用，电子企业的范围，或社交网络服务。
（来自维基百科的文字）
jquery.fn.highlight =功能（PAT）{
功能innerhighlight（节点，PAT）{
var跳过= 0；
如果（node.nodetype = = 3）{
VaR POS = node.data.touppercase（）IndexOf（PAT）；
如果（POS = 0）{
无功spannode = document.createelement（'span）；
spannode.classname = 'highlight；
无功middlebit = node.splittext（POS）；
无功endbit = middlebit.splittext（Pat，长度）；
无功middleclone = middlebit.clonenode（真的）；
spannode.appendchild（middleclone）；
middlebit.parentnode.replacechild（spannode，middlebit）；
跳过= 1；
}
}
如果（node.nodetype = = 1 node.childnodes！ /（脚本|风格）/ i.test（节点。tagname））{
对于（var i = 0；i < node.childnodes.length；+ +我）{
我= innerhighlight（节点。子{我}，PAT）；
}
}
返回跳过；
}
返回this.each（函数（）{（）
InnerHighlight（，pat.touppercase（））；
}）；
}；
jquery.fn.removehighlight =函数（）{
功能newnormalize（节点）{
对于（var i = 0，儿童= node.childnodes，nodecount = children.length；i < nodecount；i++）{
子= { }；
如果（child.nodetype = = 1）{
newnormalize（孩子）；
继续；
}
如果（child.nodetype！= 3）{继续；}
VaR下= child.nextsibling；
如果（下= = null | | next.nodetype！= 3）{继续}；
无功combined_text = child.nodevalue + next.nodevalue；
new_node = node.ownerdocument.createtextnode（combined_text）；
node.insertbefore（new_node，孩子）；
Node.removeChild（儿童）；
node.removechild（下）；
我--；
nodecount --；
}
}
返回this.find（的跨越。突出）。每个（函数（）{（）
无功thisparent = this.parentnode；
thisparent.replacechild（this.firstchild，这个）；
newnormalize（thisparent）；
}）（）；
}；
$（函数（）{（））
$（#文本搜索）。Bind（'keyup改变，功能（EV）{）
在新值
搜索关键词= $（var）瓦迩（本）；
任何旧突出显示的项
$（'body）。RemoveHighlight（）；
高亮显示如果空 /禁用
如果（搜索关键词）{
新的学期/突出
$（'body）。突出（搜索关键词）；
}
}）；
}）；
希望本文能对大家的jQuery程序设计有所帮助。