jQuery text highlighting text nodes break in IE

Question

I'm currently using this great plugin called HighlightJS for highlighting text on a page when they type in a filter field.

This works great, except for recently we updated from a very old version of jQuery (1.8.2 to 1.11.0) and this no longer works as expected in IE (all versions). It seems to break up single text nodes into a text-node for each searched item. This is problematic when I have it constantly adding & removing the highlighting on a keyup event.

Here's a screenshot of what used to be a single text node now appearing as multiple in the IE11 inspector.

---

I've put together a demo that breaks in the same way in IE here

Any ideas of how to improve this plugin to make it work as it should? I'll be sure to make a pull request to him on GitHub so others can benefit as well!

Answer 1

I ran into the same issue, and have isolated it to incorrect behavior of the implementation of the native DOM normalize() function in IE11. I've posted some reproduction steps and a workaround on my question:

Why Does IE11 Handle Node.normalize() Incorrectly for the Minus Symbol?