RegEx is not properly validated in production build, doesn't accept 0, 2, 7, a, c, u, x, sometimes also z

Question

I'm using Angular 15.2.10 and Typescript in 4.9.5. I have the following RegEx provided in one of my libraries and exposed via a service:

  private readonly _DISALLOWED_CHARS_REGEX_GENERAL = new RegExp(/^[^\\/\?\!\&\:\*\<\>\|\~\%\§\@\{\}\[\]\(\)\=\$\€\"]+$/);
  /**
  * Generally Forbidden chars: '\' '/' '?' '!' '&' ':' '*' '<' '>' '|' '~' '%' '§' '@' '{' '}' '[' ']' '(' ')' '=' '$' '€' and '"'
  */
  public get DISALLOWED_CHARACTER_REGEX_GENERAL(): RegExp {
    return this._DISALLOWED_CHARS_REGEX_GENERAL;
  }

It's currently accessed in two different places in my code Firstly in a form:

this.form = this.formBuilder.group({
      formElement1: ['', {
        validators: [Validators.maxLength(32), Validators.pattern(this.regexService.DISALLOWED_CHARACTER_REGEX_GENERAL)],
      }],
      formElement2: ['', {
        validators: [Validators.maxLength(32), Validators.pattern(this.regexService.DISALLOWED_CHARACTER_REGEX_GENERAL)],
      }]
    });

secondly it's simply used as a RegEx in another component:

  public isGroupNameValidCheck(): void {
    if (this.groupName && this.groupName !== '') {
      const regEx = this.regexService.DISALLOWED_CHARACTER_REGEX_GENERAL;
      this.isGroupNameValid = regEx.test(this.groupName);
     }
  }

Now, when evaluating this RegEx on a development build, the RegEx properly rejects all specified special characters, everything else is allowed as input. However, if I use this project after building it for production, the RegEx incorrectly flags 0, 2, 7, a, c, u, x and sometimes also z. Note: As Capital letters, all letters are accepted.

The RegEx works properly on regexr and regex101. It has been reviewed by me peers and nobody was able to find an issue with it. My research over at Angulars GitHub so far led to a similar issue and a possible cause. But before I resort to replacing the characters in the RegEx with their respective ASCII values one by one, I wanted to ask here first. I strongly suspect that something happens to my RegEx during minification, but I so far wasn't able to verify that. There are no compiler issues, no console.logs, nothing that hints at a possible error on my side.

UPDATE: I changed my variable declaration to not use RegEx constuctor but a RegEx Literal as suggested by Wiktor Stribiżew, but that didn't solve it. After building the production build with --source-map=true I discovered, that the RegEx is not transformed correctly by Angular, it becomes /^[^\\/\?\!\&\:\*\<\>\|\~\%\\xa7\@\{\}\[\]\(\)\=\$\\u20ac\"]+$/

Therefore I opened a ticket over at Angulars Github. It might be the ASCII issue I mentioned earlier in my post after all.

Answer 1

After replacing the problematic special characters with their Unicode representation, the RegEx is evaluated properly, also in prod-mode builds. In my case it was the '§' character, that wasn't transformed correctly. Also the conversion of '€' happened without removing the leading escape symbol, therefore it turned into \\u20ac instead of \u20ac; The corrected version looks like this:

/^[^\\/\?\!\&\:\*\<\>\|\~\%\u00a7\@\{\}\[\]\(\)\=\$\u20ac\"]+$/

If anyone else comes across this problem, make sure to check the prod-mode RegEx (via console.log() or other means) to make sure it matches your original RegEx.

EDIT: Apparently, in Java-/Typescript most of the special characters used in a RegEx don't need escaping. Solution as proposed by Angular Team via my ticket mentioned in question post: ^[^\\/?!&:*<>|~%§@{}[\]()=$€"]+$