闲话少说,直接看需求: 在一篇文章中查找关键字,找到后高亮显示.
这种需求可以用js实现,可以用jquery实现,殊不知jquery有现成的插件,亲,你不用自己实现了,只需要引入jquery-hightlight.js
注意:如下body内容如此复杂只是为了测试,没有其他目的.
<!DOCTYPE html>
<html>
<head>
<title>regex.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../jquery/jquery-1.11/jquery.min.js"></script>
<script type="text/javascript" src="../jquery/jquery-highlight/jquery-hightlight.js"></script>
<style>
.highlight {background-color: #FFFF88; }
</style>
<script>
$(function(){
$('#search').click(function(){
var key = $('#key').val();
if(key.length > 0) {
var body = $('#body');
body.removeHighlight();
body.highlight(key);
} else {
alert("请输入关键字!")
}
});
});
</script>
</head>
<body>
<div>
<input id="key" type="text">
<input id="search" type="button" value="搜索">
</div>
<div id="head">
This is a test head!
<div>
input the search key.
</div>
<div>
click "搜索" button.
</div>
</div>
<h1>如下是搜索区域!</h1>
<div id="body">
This is a test body!
<div>
This is a test, a test, test, tes, te, t!
Do you know and listen this test, I think you don't know this test!
</div>
<div>
这是一个简答的测试,测试.
<p>你知道或者听过这个测试吗,我认为你没有听过这个测试!</p>
</div>
<div>
This is a test, a test, test, tes, te, t!
I know't know this test, yes, this test is a not famous test!
<p>Follow me test, to test the test! I don't know what do you say?</p>
</div>
<div>
<div>
这是一个简答的测试,测试.
我不知道这个测试,是的,这不是一个注明的测试,
<span>跟随我,去测试这个测试,我都不知道我在说什么!</span>
</div>
</div>
<div>
What do you say? test, only a test?
<p>你们说什么呢?测试,一个测试?</p>
</div>
</div>
</body>
</html>
实现效果如何呢?看如下效果图:
怎么样,够简单吧!当然他的功能不仅如此,快点网上去搜索看吧!如下是我参考的资料:
http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
使用方法如下:
- 在<head>中引入jquery文件及插件文件jquery.highlight.js
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../js/jquery.highlight.js"></script>
<script type="text/javascript">
function hightlight(str){
$(".highlight").highlight(str);
}
</script> - 在页面Body部分加入从表单传递过来的关键字<body οnlοad="hightlight('<%=keywords%>');">
- Css样式:<style type="text/css"> .highlight{background-color: #FFAEB1;} </style>
- 具体介绍如下:
- 在css中或通过jquery指定高亮区域的颜色:
.highlight {background-color: #FFFF88; }
$(".highlight").css({ backgroundColor: "#FFFF88" });
- 设置需要高亮显示的词语或通过事件触发高亮显示。例如:
$("h1").highlight("highlight");
//高亮显示所有h1标签中的“highligh”$("body p").unhighlight();
//取消所有body中段落里的高亮显示;$("p").highlight("jQuery highlight plugin");
//高亮段落中的词条 “jQuery highlight plugin”$("p").highlight(["jQuery", "highlight", "plugin"]);
//高亮段落中的 “jQuery”,“highlight”及“plugin”$("p").highlight("Highlight", { caseSensitive: true });
//高亮段落中的 “Highlight”,区分大小写。$("p").highlight("light", { wordsOnly: true });
//高亮段落中的 “light”,必须是完整单词,“highlight”中的“light”不会高亮$("p").highlight("highlight", { element: 'em', className: 'error' });
//高亮段落中的 “hightlight”,并为其指定父标签为em,class为error$("p").highlight("highlight", { element: 'em', className: 'error' });
//高亮段落中的 “hightlight”,并为其指定父标签为em,class为error$("body p").highlight("jQuery", { element: 'a', className: 'jQueryLink'});
$("body p a.jQueryLink").attr({ href: 'http://jquery.com' });
//高亮段落中的 “jQuery”,并为其加上链接。