2

I have a function that adds an element to the dom around matching characters.

So a user searches "Can"

every instance of "<td>Canada</td>" for example turns to 

<td><strong class='highlight'>Can</strong>Ada</td>

When the user does the next search the old highlight is removed.

like so, $('.highlight').contents().unwrap();

issue is if the user then tries to do another search for Canada it will not be found because (to me at least) something strange is happening...

The page still shows the word 'Canada' and if I alert the contents of the table cell using either .html() or .text() the alert still shows 'Canada'.

If i right click the word canada within the table cell using chrome inspector I can see that it is now split like

<td>
    "Can" 
    "Ada" 
</td>

So the search of the dom for canada would no longer find it but a search for 'Can' would.....

so how is this split like this, but the split isn't maintained when alerting and how do I resolve it so when i remove the strong element it is still a single string...?

Thanks

user2390419
  • 41
  • 1
  • 1
  • 7

1 Answers1

2

This is best fixed through element.normalize.

unwrap() is splitting your element into separate text nodes and normalize() will merge them back together. After you remove the highlight, simply loop through all the elements with text (in this case td) and normalize them.

$('.highlight').contents().unwrap();

$('td').each(function(index,td){
    td.normalize();
});
Andy Noelker
  • 10,949
  • 6
  • 35
  • 47