网页中高亮选中的关键字

<!--选中页面中的关键字后 触发一个函数  内容如下-->
function highlight(jname){

   //去掉body中所有高亮的字段
   $(‘body‘).removeHighlight();
   //高亮body中所有jname的字符串
   $(‘body‘).highlight( jname );
   }, 200);
}

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;
}

js代码

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();
};
时间: 2024-10-01 21:01:38

网页中高亮选中的关键字的相关文章

去除网页中的选中和右键菜单

var a=function(){return false;} document.onselectstart=a; document.oncontextmenu=a; document.onmousedown=function(){if(event.button==2)a();} document.onkeydown=function(){if(even.ctrlKey)a();}

一段文字中的几个关键字显示高亮

将一段文字中的几个关键字显示高亮 示例:将"我的愿望是当个绿巨人,所以我想让我的皮(derma)肤是绿色"中的"皮肤"显示绿色. <span style="font-size:18px;">public class MainActivity extends Activity { private static TextView mTextView; //需要显示的文字 private static String keywords=&qu

css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment

抓取网页中的内容、如何解决乱码问题、如何解决登录问题以及对所采集的数据进行处理显示的过程

本文主要介绍如何抓取网页中的内容.如何解决乱码问题.如何解决登录问题以及对所采集的数据进行处理显示的过程.效果如下所示: 1.下载网页并加载至HtmlAgilityPack 这里主要用WebClient类的DownloadString方法和HtmlAgilityPack中HtmlDocument类LoadHtml方法来实现.主要代码如下. var url = page == 1 ? "http://www.cnblogs.com/" : "http://www.cnblogs

Delphi访问网页中的下拉菜单

Delphi通过TWebBrowser浏览网页,然后访问该网页中的下拉菜单: uses MsHtml;procedure TForm1.Button1Click(Sender: TObject);var  doc: IHTMLDocument2;  coll: IHTMLElementCollection;  iPos, iIndex: Integer;  selElem: IHtmlSelectElement;  optElem: IHtmlOptionElement;begin  doc :

改变listview中item选中时文字的颜色

当listview的某个item选中时,默认有个选中的高亮显示,如果你要自定义选中时的高亮显示效果,可以在listview中设置属性 1 android:listSelector="@drawable/item_selector" 其中item_selector是在drawable目录下定义的一个xml文件,这种用于突出不同状态下显示效果的xml文件我们称之为selector: 1 2 3 4 5 6 7 <?xml version="1.0" encodin

网页中的内容拷贝到EXCEL之后,有些对象无法删除

大家经常会遇到从某个系统的web页面上Copy内容到Excel中,之后,会发现有一些对象,像多选框,单选框无法删除. 看A1 位置的单选框 选中之后点delete也无法删除,很是急人啊. 不过,想要删除它也非常简单, 首先,点击ctrl+G 打开定位对话框,然后定位所有的对象,点击special  然后选择objects 这样,就选中了所有的对象.然后直接点delete就可以了 网页中的内容拷贝到EXCEL之后,有些对象无法删除

css在网页中的一些重要运用

1.导航 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ border: 1px solid #008000; width: 400px; height: 40px; background-colo

网页中的description是什么

在网页优化中,是不是要面对一些标签和代码,而今天我们要来讲的就是description.那么什么是description,description在网页中又起到什么作用. 本文来自于:e良师益友网 Description出现在网页的<head></head>:之间meta标签之一,可称为“内容标签”,“描述标签”或“内容摘要”可以预见在以后的用户搜索中Description会扮演越来越重要的技术之一. 在网站建设中,Description是出现在页面头部的 Meta 标签中,用于记录