Javascript RegEx partial match

Question

I have a regular expression pattern, which validates for a three digit number

/^\d{3}$/.test("123")   // true
/^\d{3}$/.test("123.")  // false

I want to use this regex as an input restriction on a textbox.

Basically, if the new value matches, i allow the character to by typed, otherwise i prevent it.

The problem is that no value will ever match, becase "1" is not a full match, and will not allow me to type it.

Is it any way of testing a partial match for a regEx in javascript?

/^\d{3}$/.test("123")   // true
/^\d{3}$/.test("12")    // "partial match"
/^\d{3}$/.test("a12")   // false

EDIT

\d{3} was just an example. I need to use an email regex or a phone regex as input restriction.

"email"        // true
"email@"       // true
"email@@"      // false
"@yahoo.com"   // false

EDIT 2

I have a textBox plugin with input restriction based on a regular expression.

The regular expression can be anything, a hex color Regex, for example: (#){1}([a-fA-F0-9]){6}

I need to prevent user to insert characters which doesn't match the regex.

For example, if the textbox is empty, the first allowed character would be "#".

But if i test "#" character against the regex, it will return "false", because "#" by itself is not valid.

/^(#){1}([a-fA-F0-9]){6}$/.test("#") // false

But at the same time, "#" is partial valid because it respects the regex format (and i should allow user to type it)

What i need to know is if i can verify if a string is a partial match of a regex, so i can allow the user to type the character.

/^(#){1}([a-fA-F0-9]){6}$/.test("#")        // is a partial match, allow type
/^(#){1}([a-fA-F0-9]){6}$/.test("#0")       // is a partial match, allow type
/^(#){1}([a-fA-F0-9]){6}$/.test("#00")      // is a partial match, allow type
/^(#){1}([a-fA-F0-9]){6}$/.test("#000")     // is a partial match, allow type
/^(#){1}([a-fA-F0-9]){6}$/.test("#0000")    // is a partial match, allow type
/^(#){1}([a-fA-F0-9]){6}$/.test("#00000")   // is a partial match, allow type
/^(#){1}([a-fA-F0-9]){6}$/.test("#000000")  // is a partial match, allow type
/^(#){1}([a-fA-F0-9]){6}$/.test("#000000D") // is not a match, prevent typing

Answer 1

You could partially validate the email address by using ()? for more letters and/or characters. Every ()? going deeper in the validation tree.

The following regular expression pattern validates email address letter by letter.

^[a-zA-Z]+(@{1}[a-zA-Z]*(\.{1}[a-zA-Z]*)?)?$

It does not take into account every possibility out there, but for basic ones like aa@bb.dd it works just fine and there's room to improve it further.

Answer 2

You would be better off by using a library like maskedinput.js. You can then setup your text input like follows:

jQuery(function($){
    $("#your_input").mask("999");
});

UPDATE

you can use a validator for forms and preset specific types of fields to validate

Answer 3

You'll want to use explicit "|" partial matches. For your color matching example it's pretty simple, you just need to explicitly match an empty string partial

/^(|#[a-f0-9]{0,6})$/i.test(inputStr)

For an email it's more complicated since there are more partial match combinations

/^(|\w+|\w+@|\w+@\w+|\w+@\w+\.|\w+@\w+\.\w+)$/.test(inputStr)

Note that you can't get away with something like /^(|\w*@|...)$/ since that matches @blah.com which isn't a valid partial input.

Answer 4

You can specify a range in the expression so that it matches anything between one and three digits like so:

/^\d{1,3}$/.test("1")  // true
/^\d{1,3}$/.test("12")  // true
/^\d{1,3}$/.test("123a")  // false

Answer 5

Just provide a regex that allows for partial matches. e.g. /^\d{1,3}$/

Answer 6

According to your last edit, this should work:

/^#[a-fA-F0-9]{0,6}$/