Highlighting html text using javascript

Question

I'm developing a function to highlight html inside a div, i had already checked some answers before, but i didn't find any solution to my case. the thing is, the function i have actually doesn't work with 2 pairs of html tags at the same time, example:

Having this html code:

<span>Les malalties vasculars cerebrals (MVC)
      conegudes també com a <i>feridures o ictus</i> representen la tercera causa de

And this function using jquery

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.length && pat && pat.length ? this.each(function() {
  innerHighlight(this, pat.toUpperCase());
 }) : this;
};

jQuery.fn.removeHighlight = function() {
 return this.find("span.highlight").each(function() {
  this.parentNode.firstChild.nodeName;
  with (this.parentNode) {
   replaceChild(this.firstChild, this);
   normalize();
  }
 }).end();
};

1. List item

If i search: "Les" works good .

If i search: "feridures" works fine too.

but if i search "com a feridures" the function doesn't higlight my text.

this is the only thing i need to finish my aplication.

Answer 1

The problem isn't the HTML tags, well it is but it has nothing to do with two tags. What it is, is the fact that your application is searching the literal text, meaning it finds "com a feridures" Not "com a feridures" so there is no match.

You can use jQuery to strip the HTML out of the span first, then it will work.

$(".highlight").html( $(".highlight").text() );

Example: http://jsfiddle.net/calder12/nJ5mQ/