Constructing RegExp in JavaScript from object property (string)

Question

I am attempting to create a input directive in Angular which can be configured from a remote endpoint.

The object below should result in a input-field with type=text and should only be set to valid if the input is a 6-digit number.

{
    inputfield: {
        "name": "6-digit code",
        "type": "text",
        "pattern": "/^\d{6}$/"
    }
}

The problem I am encountering is that if I use $setValidity and check the value with a Regex generated from pattern I get the following:

var pattern = new RegExp("^\d{6}$");

console.log(pattern.toString());
=> "/^d{6}$/"

Which is fine, as \ is escaped as expected. I do have access to the endpoint delivering the data. This endpoint is a REST-endpoint written in Java. So at the endpoint the Regex is defined as follows:

String regex = "/^\\d{6}$/";

So, to sum up:

From endpoint: "/^\\d{6}$/"
Received at client: "/^\d{6}$/"
Constructing RegExp from the received object gives: "/^d{6}$/"
Wanted RegExp: /^\d{6}$/

Can this be achieved without declaring the Regex at the endpoint with quadrouple slashes (i.e. "/^\\\\d{6}$/")?

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

The object below should result in a input-field with type=text and should only be set to valid if the input is a 6-digit number.
{
    "name": "6-digit code",
    "type": "text",
    "pattern": "/^\d{6}$/"
}

In JavaScript, the source text "/^\d{6}$/" produces exactly the same string as "/^d{6}$/". Since \d isn't a defined escape sequence, it's just d with an escape in front of it. In JavaScript, if a character doesn't need escaping but you escape it anyway, the escape is just ignored. (In contrast with JSON, which is strict and would complain about the text above.)

So at the endpoint the Regex is defined as follows:
String regex = "/^\\d{6}$/";

That means whatever is producing the JSON is doing so incorrectly, because if it were doing so correctly, the backslash before the d would be escaped and the source text of the object would look like this:

{
    "name": "6-digit code",
    "type": "text",
    "pattern": "/^\\d{6}$/"
}

...would work correctly with the RegExp constructor once (as squint pointed out in a now-deleted comment) you remove the leading and trailing slashes (otherwise, the regex will try to match / literally).

So the fix here is to fix whatever's producing the incorrect JSON, ideally by using a proper JSON library (Gson, Jackson, ...).

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 11, 2016 at 13:20

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

oyvindym Over a year ago

Mistake from my side. The object that should define the inputfield is not JSON, but a JavaScript object received from a call to the REST endpoint. Sorry ;)

T.J. Crowder Over a year ago

@oyvindym: It doesn't actually really matter, the fundamental problem remains that whatever is taking String regex = "/^\\d{6}$/";, putting it on an object as pattern, and then sending that object from server to client is doing so incorrectly. In JavaScript, the source text "/^\d{6}$/" defines exactly the same string as "/^d{6}$/" because unlike JSON, JavaScript is lenient and if you escape a character that doesn't need escaping (and the result isn't a defined escape sequence), the escape is ignored and just the character is used.

Collectives™ on Stack Overflow

Constructing RegExp in JavaScript from object property (string)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related