Saturday, October 23, 2010

Regex strings in Javascript

This week at work, I was asked whether I could fix some form validation rules in response to the defects found during testing. I found out that whoever created the form had the good sense to include jQuery and jQuery-validate libraries. So I volunteered for the job thinking its going to be a 5 minute piece-of-cake job. But, gosh it took almost 2 days of mine. Thanks to some crazy regexes(I found out that .NET regular expressions may not always be injected as-is into JS because of differences in syntax), changing requirements and silly mistakes I made.

Speaking about silly mistakes here's one I made. Here's a snippet from my regex [0-9]+\W{2,5} and I was trying this.

var str = '100%';
var reg = new RegExp('[0-9]+\W$');
alert(reg.test(str)); // should be true but I was getting false

The above code didn't work... My regex was way bigger than this and I thought my regex was broken somewhere. So I spent a good part of the hour tearing the regex apart to see what's wrong. The online regex checker - http://www.gethifi.com/tools/regex - helped me a lot here. Although I found a few gaps in the regex, I finally got it working in the regex checker for all my test input and they were working OK. I was at my wit's end after waiting an hour. I checked the JS source of the checker and found out the same RegExp object being used and instantiated in the exact same way. Next I fired up firebug and tried a few console logging statements. Ended up being no wiser than I started, since there were no errors and all my logging statements were coming up alright.

I took a break and as usual when I was back, hit a lucky break. I tried logging the RegExp object and behold the backslash before the 'W' was missing. I realized that, when the string was being parsed the \ would have been interpreted as an escape character and hence that character would not be part of the regular expression object when it got created. But, when the regex checker read off the same regex string from a text field, it did not have to do any string parsing, and that's why it was working there. To, resolve it we can use either:

  1. Use the literal form for creating the regex
    var reg = /[0-9]+\W$/;
    
  2. Escape the backslash character
    var reg = new RegExp('[0-9]+\\W$');
    

No comments:

Post a Comment