Home > Developer > Web Develop
The example in this paper describes how jquery implements highlighting Web page keywords. Share to everyone for your reference. Specific as follows:
This is based on the jquery implementation of the highlight page search keyword code, when you enter in the text box, if the following body contains your input, which is the keyword, then these keywords will be highlighted, is dynamically added to yellow, looks very eye-catching, Like Baidu snapshot display keywords look like.
The effect is as follows:
<!DOCTYPE html><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><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) { functioninnerHighlight(node, pat) { varskip = 0; if(node.nodeType == 3) { varpos = node.data.toUpperCase().indexOf(pat); if(pos >= 0) { varspannode = document.createElement(‘span‘); spannode.className = ‘highlight‘; varmiddlebit = node.splitText(pos); varendbit = middlebit.splitText(pat.length); varmiddleclone = middlebit.cloneNode(true); spannode.appendChild(middleclone); middlebit.parentNode.replaceChild(spannode, middlebit); skip = 1; } } elseif(node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) { for(vari = 0; i < node.childNodes.length; ++i) { i += innerHighlight(node.childNodes[i], pat); } } returnskip; } returnthis.each(function() { innerHighlight(this, pat.toUpperCase()); });};jQuery.fn.removeHighlight = function() { functionnewNormalize(node) { for(vari = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) { varchild = children[i]; if(child.nodeType == 1) { newNormalize(child); continue; } if(child.nodeType != 3) { continue; } varnext = child.nextSibling; if(next == null|| next.nodeType != 3) { continue; } varcombined_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--; } }returnthis.find("span.highlight").each(function() { varthisParent = 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 varsearchTerm = $(this).val(); // remove any old highlighted terms $(‘body‘).removeHighlight(); // disable highlighting if empty if( searchTerm ) { // highlight the new term $(‘body‘).highlight( searchTerm ); } });});</script></body>How jquery implements highlighting Web page keywords
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
