如何将模式另存为environment.prod.ts中的ENV变量？

Question

I save a pattern in an ENV variable in environment.prod.ts eg:

export const environment = { production: true, regExpTs : /^(?=.*[az])(?=.*[AZ])(?=.*\\d)(?=.*[#$@!%&*?])[A-Za-z\\d#$@!%&*?]{8,30}$/i, regExpHTML : '^(?=.*[az])(?=.*[AZ])(?=.*\\d)(?=.*[#$@!%&*?])[A-Za-z\\d#$@!%&*?]{8,30}$', };

The background of this idea is to be able to change the pattern when needed dynamically from the env and also to hide it from being embedded directly the HTML.

The first variable: regExpTs is being used in the *.ts file and it's working fine. The issue I face is regarding the variable: regExpHTML .

I read the varaible in the *.ts file as: let PASS_REGEXP_HTML = environment.regExpHTML; and then I pass it as interpolation in the *.component.html within the specific input field.

Eg <input type="password" patter="{{PASS_REGEXP_HTML}}" ../> The interpolation is also working fine, but the problem is that the pattern is somehow being changed and is't not the one saved in ENV any more.

It changes from:

^(?=.*[az])(?=.*[AZ])(?=.*\\d)(?=.*[#$@!%&*?])[A-Za-z\\d#$@!%&*?]{8,30}$

to:

^(?=.*[az])(?=.*[AZ])(?=.*d)(?=.*[#$@!%&*?])[A-Za-zd#$@!%&*?]{8,30}$

First what's the reason that it's being changed and the second what would be the solution and/or the fix for such issue?

Answer 1

It is because of backslash. Change your regExpHTML to following

^(?=.*[az])(?=.*[AZ])(?=.*\\\\d)(?=.*[#$@!%&*?])[A-Za-z\\\\d#$@!%&*?]{8,30}$