Added pattern to be more than 2 characters before highlighting
| /* | |
| 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) { | |
| if(pat.length >1) { | |
| 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(); | |
| }; |
| <?xml version="1.0" encoding="UTF-8"?> | |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | |
| <head> | |
| <title>On-Page Text Search</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 <a href="/wiki/Web_site" title="Web site" class="mw-redirect">web site</a> for the Internet (<a href="/wiki/World_Wide_Web" title="World Wide Web">World Wide Web</a>) or an <a href="/wiki/Intranet" title="Intranet">intranet</a> (a private network). This can include <a href="/wiki/Web_design" title="Web design">web design</a>, <a href="/wiki/Web_content_development" title="Web content development" class="mw-redirect">web content development</a>, client liaison, <a href="/wiki/Client-side_scripting" title="Client-side scripting">client-side</a>/<a href="/wiki/Server-side_scripting" title="Server-side scripting">server-side</a> <a href="/wiki/Programming" title="Programming" class="mw-redirect">scripting</a>, <a href="/wiki/Web_server" title="Web server">web server</a> and <a href="/wiki/Network_security" title="Network security">network security</a> configuration, and <a href="/wiki/E-commerce" title="E-commerce" class="mw-redirect">e-commerce</a> development. However, among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing <a href="/wiki/Markup_language" title="Markup language">markup</a> and <a href="/wiki/Computer_programming" title="Computer programming">coding</a>. Web development can range from developing the simplest static single page of <a href="/wiki/Plain_text" title="Plain text">plain text</a> to the most complex web-based <a href="/wiki/Internet_application" title="Internet application" class="mw-redirect">internet applications</a>, <a href="/wiki/Electronic_business" title="Electronic business">electronic businesses</a>, or <a href="/wiki/Social_network_service" title="Social network service">social network services</a>.</p> | |
| <p>For larger organizations and businesses, web development teams can consist of hundreds of people (<a href="/wiki/Web_developer" title="Web developer">web developers</a>). Smaller organizations may only require a single permanent or contracting <a href="/wiki/Webmaster" title="Webmaster">webmaster</a>, or secondary assignment to related job positions such as a <a href="/wiki/Graphic_designer" title="Graphic designer">graphic designer</a> and/or <a href="/wiki/Information_systems" title="Information systems" class="mw-redirect">information systems</a> technician. Web development may be a collaborative effort between departments rather than the domain of a designated department.</p> | |
| (Text from <a href="http://en.wikipedia.org/wiki/Web_development">Wikipedia</a>) | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment