Search and Highlight in jQuery

Question

I would like to search and highlight text using jQuery/Java Script.

sample HTML 1:

Good Morning<         


        

                      

              相关标签:
       
      

Answer 1

http://jsfiddle.net/UPs3V/291/

 var src_str = $("#test").text();
var term = "my text";
term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("("+term+")", "gi");

src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");

$("#test").html(src_str);

try this one it may help you

Answer 2

Try this out:- http://jsfiddle.net/adiioo7/H7CqV/

You need to remove the b tags from div1 and in order to apply bold property you can use css property font-weight:bold.

HTML:-

<div id="div1" style="font-weight:bold">Good Morning</div>
<div id="div2">Good Evening</div> 
<div id="div3">Good Morning</div>

or

<div id="div1"><b>Good Morning</b></div>
<div id="div2">Good Evening</div> 
<div id="div3">Good Morning</div>

JS:-

$("body").highlight("Good Morning");

Edit: highlight is a 3rd party jquery lib, more info here: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

Answer 3

Try this in all above answer search with HTML tag.

This answer help full to you for perfect search text which I implemented in my project

<script type="text/javascript">
   var term = "my text";
   $('#test').html(function () {
     return $(this).html().replace(new RegExp(term + "(?=[^>]*<)","ig"), "<mark>$&</mark>");
   });
</script>

Answer 4

demo

script

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

HTML

Search: <input type="text" id="text-search" />

<p><b>Demo </b> he new edition of KnowlEdge K12 enables your school with flexibility by wholly automating their administrative and academic processes. With IncTech’s solution for K12 schools, you can. We give you an internal infrastructure so you can share school and student information. </p>

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