zoukankan      html  css  js  c++  java
  • 网页中高亮选中的关键字

    <!--选中页面中的关键字后 触发一个函数  内容如下-->
    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();
    };
  • 相关阅读:
    c学习第3天
    [BZOJ2124] 等差子序列
    CF710F String Set Queries
    Cow Hopscotch (dp+树状数组优化)
    CF528D Fuzzy Search (bitset)
    Gym 101667L Vacation Plans (dp)
    Codeforces 432D Prefixes and Suffixes (kmp+dp)
    [题解]BZOJ2115 XOR
    洛谷 P2921 [USACO08DEC]在农场万圣节Trick or Treat on the Farm
    从中国矢量图筛选出江苏省行政区划图
  • 原文地址:https://www.cnblogs.com/wjqboke/p/6085297.html
Copyright © 2011-2022 走看看