Angularjs ui utils highlight filter breaks application on search

Question

I am using Angular ui-utils highlight filter and I have the following code:

<span data-ng-bind-html="organization.level1Name | highlight:vm.search"></span>

When I search using special character like [ or (, I get angular exception and application breaks.

SyntaxError: Invalid regular expression: /(/: Unterminated group at new RegExp (native) at v. (http://localhost:50463/EIA/source/dist/vendor.min.js:72:1157) at i (http://localhost:50463/EIA/source/dist/vendor.min.js:38:92754) at cr.| (http://localhost:50463/EIA/source/dist/vendor.min.js:38:86832) at h.constant (http://localhost:50463/EIA/source/dist/vendor.min.js:38:92126) at Object.e (http://localhost:50463/EIA/source/dist/vendor.min.js:38:101832) at v.$digest (http://localhost:50463/EIA/source/dist/vendor.min.js:38:57280) at v.$apply (http://localhost:50463/EIA/source/dist/vendor.min.js:38:58986) at http://localhost:50463/EIA/source/dist/client.js:1007:31 at http://localhost:50463/EIA/source/dist/vendor.min.js:38:64888 undefined

I tried using ng-sanitize library but still I get the same error.

Please, how could I resolve that?

Answer 1

You should escape your RegExp input since ( is a special character for regular expressions:

function escapeRegExp(str) {
  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}

Then, just use it:

new RegExp(escapeRegExp(search), 'gi')