convert HTML5 Regex pattern to javascript Regex

Question

For an input field with a regex pattern:

<input type="text" maxlength="4" inputmode='numeric' pattern="\d*">

I would like to use javascript to validate the input, by parsing the pattern attribute in some way like this (which doesn't work):

$('input').on('keypress', function(e){
    var regex = this.pattern,
        valid = eval(regex).test( e.charCode );

    if( !valid )
        return false;
});

I know the Regex in the pattern is different than the one JS uses, but I need some way to convert any Regex in a way this method could work, to allow the typing of only the chars allowed by the pattern.

As a rule of thumb : if your solution uses eval, it's probably bad. — Denys Séguret
– Denys Séguret, Commented Oct 18, 2013 at 11:15
I wouldn't say BAD if it's something I use internally for myself and no injection may occur. — vsync
– vsync, Commented Oct 18, 2013 at 11:22
Not "BAD" as is "prone to injection" but "bad" as in "inefficient, inelegant and prone to bugs". — Denys Séguret
– Denys Séguret, Commented Oct 18, 2013 at 11:26

Denys Séguret · Accepted Answer · 2013-10-18 11:11:04Z

6

Use the RegExp constructor :

var regex = this.pattern,
    valid = new RegExp("^"+regex+"$").test( e.charCode );

But your pattern should probably be \d+, not \d*.

answered Oct 18, 2013 at 11:11

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

2 Comments

vsync Over a year ago

it's always false for me when i tried it... function testChar(pattern, s){ return valid = new RegExp("^"+pattern+"$").test( s ); }; testChar("\d+", '3')

Denys Séguret Over a year ago

That's because you badly create the string literal : use "\\d+" instead of "\d+". See jsfiddle.net/QK96C

Vinay Pratap Singh Bhadauria · Accepted Answer · 2013-10-18 11:12:38Z

1

Just add the start and end of the string "^"+your reg ex here+"$"

answered Oct 18, 2013 at 11:12

Vinay Pratap Singh Bhadauria

9,9873 gold badges30 silver badges50 bronze badges

Comments

R. Oosterholt · Accepted Answer · 2013-10-18 11:17:48Z

0

Maybe you can use this plugin. It emulated the html5 features when they are not available (older browsers).

answered Oct 18, 2013 at 11:17

R. Oosterholt

8,2003 gold badges56 silver badges80 bronze badges

1 Comment

vsync Over a year ago

i'm looking for a minimal solution to this, like a one-line thing

Collectives™ on Stack Overflow

convert HTML5 Regex pattern to javascript Regex

3 Answers 3

2 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Related