0

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. enter image description here

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!

Community
  • 1
  • 1
Chris Barr
  • 29,851
  • 23
  • 95
  • 135
  • What is `:icontains` shouldn't it be `:contains` ? – Pavlo Mar 07 '14 at 20:57
  • Fiddle seems at first glance to be working fine in my Win 7 IE 10 VM. Anything I should do prove it's not working? – Jason Reid Mar 07 '14 at 21:09
  • @Pavlo - `:icontains` is something I made so it's a case-insensative search. The code for that is included below in the fiddle. – Chris Barr Mar 07 '14 at 21:20
  • @JasonReid - Do a search, then do another search. Try searching for things in the middle of words. *"adam" then "male" then "am" then "da"* Keep in mind that the highlighting is what I'm having problems with, not the show/hide of the items. – Chris Barr Mar 07 '14 at 21:36
  • Odd. I didn't experience any issues with the highlighting at all. Ran IE10 in a Win 7 VM, and IE9 on another VM. Don't have an IE11 one handy, though, unfortunately. – Jason Reid Mar 07 '14 at 22:02
  • So you're saying that after multiple searches in IE (doing the searched I mentioned in my commend above) the text is correctly highlighted in yellow every time? – Chris Barr Mar 10 '14 at 13:28
  • Consistently doing a search for "da" will not highlight in the fiddle example I provided. Delete it and then perform the same search again. Remember, this question is about the *highlighting* not the showing/hiding of the items. – Chris Barr Mar 10 '14 at 13:41
  • There is actually a bug for this...normalize is broken in IE 11 https://connect.microsoft.com/IE/feedback/details/809424/node-normalize-removes-text-if-dashes-are-present#tabs – Dan Mar 13 '14 at 15:27

1 Answers1

2

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?

Community
  • 1
  • 1
JessieArr
  • 767
  • 6
  • 11