Javascript Regex should pass .test() but appears to fail - why?

Question

I seem to be getting a consistently strange outcome when testing my regex in javascript.

Here's my fiddle: http://jsfiddle.net/s5fYf/15/

This is taken from a web project I'm building. I pass an array of validation objects into my validation function which iterates through them, validating each rule against the value. If one is false it should stop the loop and return a return object which picks up a message and cssClass from the failed rule.

The problem is the validation method seems to return false even if the regex test passes, which should be impossible! So I feel like I'm missing something key. From the debug output you can see that the regex test that is output passes, but then obviously fails when it is tested in the code. This is inline with what I see in my project where if I omit the debug output the return value basically toggles between true and false.

Essentially the /regex/.test(value) function seems to oscillate between true and false which is consistent but not what I was expecting... So, my question is what is causing this bizarre behaviour!?

I have tested my regex outside of the solution and as far as I can see it works.

UPDATE:

Omitting the 'g' or global flag from my regex solved this issue.

See the answer below and then this link for a full explanation of the global flag and its pitfalls:

Why RegExp with global flag in Javascript give wrong results?

Thanks for including the update with the solution. I was facing exactly the same issue and your solution worked! — Rael Gugelmin Cunha, May 31 '23 at 20:02

Jamiec · Accepted Answer · 2012-02-14T10:50:25.527

29

It boils down to the fact that the test method of javascript regular expressions returns a result and moves a pointer on to after the match.

So the first call returns true, then the second returns false. Check this example: http://jsfiddle.net/B9aVA/

var regex = /^.+$/g
var input = "Hello";
console.log(regex.test(input));
console.log(regex.test(input));

Writes

true
false

So your code which calls test twice:

case "regex":
    $(".debug-info").append('<span>Result: ' + validation[i].rule.test(value) + '</span><br />');
     if (!validation[i].rule.test(value))
          returnValue.isValid = false;
     break;

My suggestion is to call test once and store the result in a variable, and use that instead

case "regex":
    var result = validation[i].rule.test(value);
    $(".debug-info").append('<span>Result: ' + result + '</span><br />');
     if (!result)
          returnValue.isValid = false;
     break;

Moral of the story: Methods can have side effects, that's what distinguishes them from properties.

edited Feb 14 '12 at 10:50

answered Feb 14 '12 at 10:45

Jamiec

133,658
13
134
193

Updated fiddle: http://jsfiddle.net/Ym2hW/2/ So now I get consistency between `test()` and the return value. But if you trigger the blur multiple times you get the same oscillations.. How would you get around this? – Jon Feb 14 '12 at 11:02
1

Okay so the issue lies with the global flag, see my update above. – Jon Feb 14 '12 at 11:21
1

Thank you! When I dropped the `g` global flag from my regex the stored `test()` result issue went away. With the global flag about 20% of the additional regex.test() calls failed when they were valid. – Dylan Valade Apr 08 '12 at 14:40

Javascript Regex should pass .test() but appears to fail - why?

1 Answers1

Linked