0

I've got a very simple script working that filters job opportunities by their name (see list image). This dropdown filters everything, except any opportunity name that has parentheses or a plus sign, and I'm not up to scratch enough to understand how I can effectively get around this issue without changing 102,000 rows in a database.

enter image description here

This is the snippet of code that performs the RegExp match (it's working fine, aside from those characters)

return _.orderBy(
  this.results.filter(result =>
    result.opportunity.match(
      RegExp(this.opportunitySearch, "i")
    )
  )
);

And as you can see here, this is how Vue is receiving it:

enter image description here

Is anyone able to help point me in the right direction please?

Andy Holmes
  • 7,817
  • 10
  • 50
  • 83
  • 1
    post the regex. you need to escape parenthesis and the plus sign. – Steven Spungin Dec 24 '20 at 11:32
  • You actually need to escape all special regex characters or `RegExp` will throw an error. – pilchard Dec 24 '20 at 11:35
  • Does this answer your question? [Escape string for use in Javascript regex](https://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex) or [Is there a RegExp.escape function in JavaScript?](https://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript) – pilchard Dec 24 '20 at 11:36
  • i would bet the regex uses a char set of digits numbers and the space. [a-zA-Z0-9 ]+ and should be [a-zA-Z0-9()+]+. in that case, escaping is not needed. – Steven Spungin Dec 24 '20 at 11:44
  • @StevenSpungin that is literally the code I'm using, I've got nothing else anywhere that affects it / defines it currently – Andy Holmes Dec 24 '20 at 11:44
  • 1
    If `this.opportunitySearch` includes any of the regex [special characters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Using_special_characters) these will trigger their intended special use when passed to `RegExp`, or if they constitute a malformed regex `RegExp` will throw an error. You need to escape `this.opportunitySearch` before passing it to `RegExp`. see the duplicates I posted. – pilchard Dec 24 '20 at 11:49
  • Perhaps I'm going about this wrong, I'm just using the value in opportunitySearch to filter my results array, its working, aside from anything that has + and () - this is my first proper go at Vue / JS. Every other value works as intended, apart from the ones with those characters – Andy Holmes Dec 24 '20 at 11:52
  • have you tried `[` `.` `\w` etc... – pilchard Dec 24 '20 at 11:55
  • @pilchard no, as I've said this is my first proper go at this, I genuinely _don't know_ what I'm doing wrong / how to implement things properly inside Vue – Andy Holmes Dec 24 '20 at 11:55
  • 1
    I am always amazed that RegExp does not have a native escape method. – Steven Spungin Dec 24 '20 at 12:01

1 Answers1

1

Escape your regex. Those 3 characters need to be escaped or will be interpreted as meta characters.

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

return _.orderBy(
  this.results.filter(result =>
    result.opportunity.match(
      RegExp(escapeRegExp(this.opportunitySearch), "i")
    )
  )
);
Steven Spungin
  • 27,002
  • 5
  • 88
  • 78