jQuery高亮关键词搜索js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery高亮关键词搜索js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery高亮关键词搜索</title>
<style type="text/css">
.highlight {
    background-color: #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><b>Web development</b> is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). 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>
<p>For larger organizations and businesses, web development teams can consist of hundreds of people (web developers). Smaller organizations may only require a single permanent or contracting webaster, or secondary assignment to related job positions such as a graphic designer and/or information systems technician. Web development may be a collaborative effort between departments rather than the domain of a designated department.</p>

(Text from Wikipedia)

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="highlight.js"></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>

JS代码(highlight.js):

/*highlight v3 !! Modified by Jon Raasch (http://jonraasch.com) to fix IE6 bug !!Highlights arbitrary terms.<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>MIT license.Johann Burkard<http://johannburkard.de><mailto:jb@eaio.com>*/
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();
}
;

附件:下载该文件资源,减少时间成本(增值服务)