jQuery实现高亮显示网页关键词的方法

最新推荐文章于 2021-09-27 14:24:42 发布

bit小兵

最新推荐文章于 2021-09-27 14:24:42 发布

阅读量214

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sjqq/p/6385977.html

版权

本文实例讲述了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>

转载于:https://www.cnblogs.com/sjqq/p/6385977.html

bit小兵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现高亮显示网页关键词的方法

本文实例讲述了jQuery实现高亮显示网页关键词的方法。分享给大家供大家参考。具体如下：这是一款基于jquery实现的高亮显示网页上搜索关键词的代码，当你在文本框中输入的时候，如果下面的正文中包括你输入的内容，也就是关键字，那么这些关键字是会高亮显示的，被动态添加成黄色，看上去很醒目，就像百度快照显示关键词的样子。运行效果如下图所示：<!DOCTYPE html&g...
复制链接

扫一扫