1

I've created/adapted a highlight function using JS/jQuery. Which takes the terms after the query string '?search=' in the address bar and highlights all those terms on a section of the page a hue of yellow. (It also collapses the panel on the page too) I've tried this in dev mode and it worked a treat. However, when it's in production it keeps crashing the browser window and I really can't figure out why. Any assistance with this is greatly appreciated. Thanks in advance.

   function highlightTerm() {
       var url = window.location.href;
       var index = url.indexOf("qaisearch=");
       if (index != -1) {
           var term = url.substr(index + 10);

           term = decodeURIComponent(term);
           var srchStr = $("div.col-md-9").html();
           var pattern = new RegExp("(" + term + ")", "gi");
           term = term.replace(/(\s+)/, "(<[^>]+>)*$1(<[^>]+>)*");
           srchStr = srchStr.replace(pattern, "<mark>$1</mark>");
           srchStr = srchStr.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/, "$1</mark>$2<mark>$4");
           $("div.col-md-9").html(srchStr);
           $('.panel-default > .panel-collapse').toggleClass('in');
       }

    }
    highlightTerm();
B_A_W
  • 86
  • 2
  • 9
  • 1
    FYI: `term = term.replace(/(\s+)/, "(<[^>]+>)*$1(<[^>]+>)*");` makes no sense to me, you are not using the result anywhere. Can `term` contain symbols like `(` or `)`? – Wiktor Stribiżew Oct 20 '17 at 10:56
  • @RogerC I wish I could. But this code is designed to work with information in Bootstrap collapsible panels if that helps at all. – B_A_W Oct 20 '17 at 11:05
  • @WiktorStribiżew - no symbols only characters – B_A_W Oct 20 '17 at 11:06
  • Can you provide examples of complete dev and production query strings? – Guillaume Georges Oct 20 '17 at 11:39
  • @RogerC - These could be terms like 'benchmarking', 'protocol', 'resistance ', 'management'. Some could be more than one word - so it could be the same words listed next to each other. e.g. "...qaisearch=benchmarking protocol management" – B_A_W Oct 20 '17 at 11:46
  • Sorry, I meant complete URL. Host + query string. You can change the host if you don't want to expose your site / company. But I want to see if something in your production URL could make your code fail. – Guillaume Georges Oct 20 '17 at 11:54
  • @RogerC it's ' .../qaionline/streams/accountancy,-audit-and-risk/internal-audit/audit-management/benchmarking' - That's what I've copied from the address bar – B_A_W Oct 20 '17 at 13:00
  • What URL is this? dev or prod? What exactly is happening in production? You said it crashes the browser's window. Do you get any error? Are you able to add a breakpoint in your function, to see which line causes the crash? – Guillaume Georges Oct 20 '17 at 14:51
  • @RogerC the url is dev. It's ore than likely a clash with another script and what I am working with isn't in the best of states.I don't get an error, although I have only tried in Chrome. What I get in the circular icon in the tab and then a window popping up telling me to 'wait' or 'kill' the page - I never get a chance to inspect. – B_A_W Oct 20 '17 at 14:57
  • 1
    If you can't inspect, you could use the debugger keyword in your function to pause in it. That way you'll be able to inspect. https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#loc – Guillaume Georges Oct 20 '17 at 14:59

0 Answers0