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

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.

"this is the only thing i need to finish my aplication." Famous last words — David L
– David L, Commented Mar 14, 2013 at 18:49

Rick Calder · Accepted Answer · 2013-03-14 19:12:50Z

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/

answered Mar 14, 2013 at 19:12

Rick Calder

18.8k3 gold badges27 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Highlighting html text using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related