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?
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')