In any project, there will be a certain amount of unknown. This is the nature of our work.Ka Wai Cheung – The developer’s code

In frontend development the “great unknown” is usually the client (client means hardware, software and the interaction behavior) but sometimes clientside technologies like JavaScript itself react totally unexpected.

A trivial task: validate a date and compare it with another, the small challenge these dates can have different formats. The code implemented had been a collection of substr steps, quite painful to read and not a good base to allow further date-formats. Foolish as I am, I started to refactoring:


var isValidDateCombination = function(a,b) {
	// date regex (dd.mm.YYYY, d.m.Y, dd-mm-YYY...)
	var xpr = /^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$/,
			getDateTime = function(str) {
				// get the time in case regex matches
				// otherwise false
				var temp;
				if( str.match( xpr )) {
					temp = str.split( xpr );
					return new Date(temp[3], (temp[2]-1),temp[1]).getTime();
				}
				return false;
			};
	 // project specific - valid only in case
	 // date A is older
	 if(getDateTime(a) < getDateTime(b)) {
	 		return true;
	 }
	 return false;
}
// tests...
isValidDateCombination( '07-11-2011' , '05-11-2011'); // asserts false
isValidDateCombination( '01-11-2011' , '05-11-2011'); // asserts true

At first glance, everything seemed to work. The output was as expected. Task completed, ticket closed, call it a day. Next morning – Ticket is open again: The new code does not work properly. I did further tests, still no errors on my side. I made some screenshots to demonstrate the proper behaviour, asked to clear cache etc. – the typical the client is the unkown reaction. Reassigned the ticket – it came promptly back, another screenshot attached – Internet Explorer this time – and here the results are different, all tests are false. Bu why?

An error in the regular expression? Not really, the match works cross browser. The split function causes the error, and the consequence is an invalid date. According to the specification, the string method can be used with strings and regular expressions. But there are a few small differences:


var test_string = 'a,b,c,,,d,e,f,g';
 
// Split with a string
// asserts: 9 -> result is 9
var test_a = test_string.split(',');
console.log(test_a.length);
 
// Split with a regular expression
// asserts: 9 -> result in IE: 7
var test_b = test_string.split(/,/);
console.log(test_b.length);

The split method reacts differently than the exec method of the RegExp object. If you change a single line in the function as follows:


// correction the line
temp = str.split( xpr );
// to 
temp = xpr.exec(str);

Like this everything works as expected – cross browser. All this because of a(nother) buggy implementation in some browsers. Steven Levithan describes a whole series of errors regarding the split functionality (not only concerning the Internet Explorer) and offers a solution by overwriting the prototype method.

The String.prototype.split method is very handy, so it’s a shame that if you use a regular expression as its delimiter, the results can be so wildly different cross-browser that odds are you’ve just introduced bugs into your code. Steven Levithan – JavaScript split Bugs: Fixed!

The very same regular expression with different results. A mysterium – not really, but one more time proving the statement: “In any project will be a certain amount of unknown,…”