Why the output of this regex varies?

Question

I am trying to construct regex using RegExp() based on provided string. This string is provide by a request or generated dynamic.

I have two different inputs

1) "te\*" -> which expects to remove special behavior of '*'. Expected regex output should be /te\*/g.

2) "te*" -> Which uses the special behavior of 0 or More repeating character 'e'. Expected regex output should be /te*/g.

new RegExp("te\*") -> /te*/
new RegExp("te*") -> /te*/

My first question is why the result of both inputs end up is same? I guess it may be because of escaping. Then I tried

new RegExp("te\\*") -> /te\*/

I added escaping after looking in to the doc.

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

Using escape function ended up same result than different one.

escapeString("te\*") -> /te\\*/
escapeString("te*") -> /te\\*/

I tried unescaping by replacing two blackslashes by none. I am not pretty sure whether this unescaping is correct.

var unescapeString = function(string){
 return string.replace(/\\\\/g,"");
}

I was wondered why didn't the regex result changed. I couldn't figure out how should make difference of those inputs?

With this behavior, I decided to try with few things like escaping and do unescaping input works or not.

1) First Input "te\*"

var unescapeString = function(string){
 return string.replace(/\\\\/g,"");
}

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

var aa = "te\*";

var a1_es = escapeString(aa);
aa_arr = [];
aa_arr.push(a1_es);
console.log("es1 => ", aa_arr);

var aa_es = escapeString(aa_arr[0]);
aa2_arr = [];
aa2_arr.push(aa_es);
console.log("es2 => ", aa2_arr);

var aa_ues = unescapeString(aa2_arr[0]);
aa_uesArr = [];
aa_uesArr.push(aa_ues);
console.log("ues ===>", aa_uesArr);

var rgex = new RegExp(aa_uesArr[0]);

console.log("rgex2 ===> ",rgex )

Output for above snippet:

es1 =>  [ 'te\\*' ]
es2 =>  [ 'te\\\\\\*' ]
ues ===> [ 'te\\*' ]
rgex2 ===>  /te\*/

My expected output for First Input is fine.

2) Second input "te*"

var actual = "te*";

var unescapeString = function(string){
 return string.replace(/\\\\/g,"");
}

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

var actual_es1 = escapeString(actual);
actual1_arr = [];
actual1_arr.push(actual_es1);
console.log("es1 => ", actual1_arr);


var actual_es = escapeString(actual1_arr[0]);
actual_arr = [];
actual_arr.push(actual_es);
console.log("es2 => ", actual_arr);


var actual_ues = unescapeString(actual_es);
actual_uesArr = [];
actual_uesArr.push(actual_ues);
console.log("ues ===>", actual_uesArr);

var actualrgex = new RegExp(actual_uesArr[0]);
console.log("actualrgex ===> ",actualrgex );

Output for above snippet

es1 =>  [ 'te\\*' ]
es2 =>  [ 'te\\\\\\*' ]
ues ===> [ 'te\\*' ]
actualrgex ===>  /te\*/

Expected output for Second Input Varies. It should be /te*/.

I would like to know whether am i missing something here or heading towards different direction.

I appreciate any help or suggestions of alternative approach to resolve this. Thanks for reading this long post!!!

Answer 1

check out first what the strings are, before building the regex so you notice how the \* becomes a single * long before getting into the regex and that is because of the backslash \ behavior in JavaScript Strings

var arr = ['te\*', 'te*', 'te\\*'];
arr.forEach(function(s) {
  console.log('s => ', s);
});

and just in case you wanna see it in action in your code snippet:

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

var arr = ['te\*', 'te*', 'te\\*'];
arr.forEach(function(s) {
  console.log('s => ', s);

  var es1 = escapeString(s);
  console.log('es1 => ', es1);
  console.log('regex1 ===> ', new RegExp(es1));

  var es2 = escapeString(es1);
  console.log('es2 => ', es2);
  console.log('regex2 ===> ', new RegExp(es2));
});