jQuery实现高亮显示网页关键词的方法
本文实例讲述了jQuery实现高亮显示网页关键词的方法。分享给大家供大家参考。具体如下:
这是一款基于jquery实现的高亮显示网页上搜索关键词的代码,当你在文本框中输入的时候,如果下面的正文中包括你输入的内容,也就是关键字,那么这些关键字是会高亮显示的,被动态添加成黄色,看上去很醒目,就像百度快照显示关键词的样子。
运行效果如下图所示:
<!DOCTYPE html>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>jquery文字高亮显示</title>
<style type=
"text/css"
>
.highlight {
padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#fff34d;
-moz-border-radius: 5px;
/* FF1+ */
-webkit-border-radius: 5px;
/* Saf3-4 */
border-radius: 5px;
/* Opera 10.5, IE 9, Saf5, Chrome */
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
/* FF3.5+ */
-webkit-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 */
}
.highlight {
padding:1px 4px;
margin:0 -4px;
}
</style>
</head>
<body>
Search: <input type=
"text"
id=
"text-search"
/>
<p>This can include web design, web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development. However, among web professionals,
"web development"
usually refers to the main non-design aspects of building web sites: writing markup and coding. Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, or social ntwork services.</p>
(Text from Wikipedia)
<script type=
"text/javascript"
src=
"jquery-1.6.2.min.js"
></script>
<script type=
"text/javascript"
>
jQuery.fn.highlight =
function
(pat) {
function
innerHighlight(node, pat) {
var
skip = 0;
if
(node.nodeType == 3) {
var
pos = node.data.toUpperCase().indexOf(pat);
if
(pos >= 0) {
var
spannode = document.createElement(
'span'
);
spannode.className =
'highlight'
;
var
middlebit = node.splitText(pos);
var
endbit = middlebit.splitText(pat.length);
var
middleclone = middlebit.cloneNode(
true
);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
skip = 1;
}
}
else
if
(node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
for
(
var
i = 0; i < node.childNodes.length; ++i) {
i += innerHighlight(node.childNodes[i], pat);
}
}
return
skip;
}
return
this
.each(
function
() {
innerHighlight(
this
, pat.toUpperCase());
});
};
jQuery.fn.removeHighlight =
function
() {
function
newNormalize(node) {
for
(
var
i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {
var
child = children[i];
if
(child.nodeType == 1) {
newNormalize(child);
continue
;
}
if
(child.nodeType != 3) {
continue
; }
var
next = child.nextSibling;
if
(next ==
null
|| next.nodeType != 3) {
continue
; }
var
combined_text = child.nodeValue + next.nodeValue;
new_node = node.ownerDocument.createTextNode(combined_text);
node.insertBefore(new_node, child);
node.removeChild(child);
node.removeChild(next);
i--;
nodeCount--;
}
}
return
this
.find(
"span.highlight"
).each(
function
() {
var
thisParent =
this
.parentNode;
thisParent.replaceChild(
this
.firstChild,
this
);
newNormalize(thisParent);
}).end();
};
</script>
<script type=
"text/javascript"
>
$(
function
() {
$(
'#text-search'
).bind(
'keyup change'
,
function
(ev) {
// pull in the new value
var
searchTerm = $(
this
).val();
// remove any old highlighted terms
$(
'body'
).removeHighlight();
// disable highlighting if empty
if
( searchTerm ) {
// highlight the new term
$(
'body'
).highlight( searchTerm );
}
});
});
</script>
</body>
</html>
jQuery实现高亮显示网页关键词的方法的更多相关文章
- [JS]jQuery,javascript获得网页的高度和宽度
[JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...
- Jquery获得控件值的方法
一 Jquery获得服务器控件值的方法 由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<a ...
- JQuery阻止表单提交的方法总结 - 使用onsubmit()验证表单并阻止非法提交
方法1:<form onsubmit="javascript:confirm()"> 方法内返回false阻止表单提交 示例:代码检测textarea内填写的长度,未填 ...
- 记一个jquery 无缝轮播的制作方法
接触前端也很久了,今天才发现,要做好一个轮播,其实有很多东西需要考虑进去,否则做出来的轮播效果并不好,下面我就来做一个轮播,是依赖jquery来写的 1.要做轮播,首先需要的是HTML的内容,css的 ...
- Python爬虫之三种网页抓取方法性能比较
下面我们将介绍三种抓取网页数据的方法,首先是正则表达式,然后是流行的 BeautifulSoup 模块,最后是强大的 lxml 模块. 1. 正则表达式 如果你对正则表达式还不熟悉,或是需要一些提 ...
- jquery数组删除指定元素的方法:grep()
jquery数组删除指定元素的方法:grep() 金刚 数组 jquery javascript 元素 遇到的问题 今天遇到一个问题,删除数组中的一个指定元素,并返回新的数组. 我定义的js数组是这样 ...
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法
jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法 在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...
- php查看网页源代码的方法
这篇文章主要介绍了php查看网页源代码的方法,涉及php读取网页文件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了php查看网页源代码的方法.分享给大家供大家参考.具体实现 ...
随机推荐
- 〖Android〗把CM(Android)源代码导入eclipse的正确方法(2013-7-3)
1. 首先应当使CM代码成功编译过一次: cd /path/to/cm . build/envsetup lunch full-eng mka 2. 配置eclipse开发的基本环境 cd /path ...
- WebService一些概念
1.WebService,顾名思义就是基于Web的服务.它使用Web(HTTP)方式,接收和响应外部系统的某种请求.从而实现远程调用. 2.我们可以调用互联网上查询天气信息Web服务,然后将它嵌入到我 ...
- Ubuntu8.04系列-系统优化篇
文章欢迎转载,转载请注明出处:嘉骏苑http://luckiss.blogcn.com 原文出处:http://luckiss.blogcn.com/diary,15151058.shtml ...
- axure rp 8.0
授权人:University of Science and Technology of China (CLASSROOM) 授权密钥:DTXRAnPn1P65Rt0xB4eTQ+4bF5IUF0gu0 ...
- 【LeetCode】81. Search in Rotated Sorted Array II (2 solutions)
Search in Rotated Sorted Array II Follow up for "Search in Rotated Sorted Array":What if d ...
- HDU 4927 Series 1 ( 组合+高精度)
pid=4927">Series 1 大意: 题意不好翻译,英文看懂也不是非常麻烦,就不翻译了. Problem Description Let A be an integral se ...
- PySpark的DataFrame处理方法
转:https://blog.csdn.net/weimingyu945/article/details/77981884 感谢! ---------------------------------- ...
- node.js 连接 mysql
var mysql = require("mysql"); var connection = mysql.createConnection({ host: '127.0.0.1', ...
- 用于检测进程的shell脚本代码小结
本文介绍一段shell脚本,它可以检测某进程或某服务是否正在运行,然后以邮件通知.有需要的朋友参考下 一个简单的shell脚本,用来找出关键的服务是否正在运行,适用于Linux操作系统或Unix操作系 ...
- Flume线上日志采集【模板】
Flume线上日志采集[模板] 预装软件 Java HDFS Lzo/Lzop 系统版本 Flume 1.5.0-cdh5.4.0 系统流程图 flume-env.sh配置文件 export JAVA ...