Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at the jQuery Conference 2010 (Boston, MA) with: Seth Johnson

Different Browsers Use Different Non-Matching Captured RegEx Pattern Values

By Ben Nadel on

Yesterday, Alec Perkins brought it to my attention that Chrome was passing in an undefined value for a non-matching, captured group in a regular expression (RegEx) replace function. This is a different behavior than Firefox, which passes in an empty string for non-matching, captured groups. I typically only test my Javascript in Firefox (yes, it's a bad habit); so, after hearing this, I wanted to test this feature in a few different browsers to see how they all behaved. The demo for the experiment is quite simple - I'm just matching a pattern than has an optional, but non-matched group:

  • <!DOCTYPE HTML>
  • <html>
  • <head>
  • <title>Javascript String Replace Data Types</title>
  • <script type="text/javascript">
  •  
  • // Create a string to test.
  • var test = "You are just too sexy!";
  •  
  • // Create a pattern to match a sub-string with an optional
  • // capturing group - "way" is not required.
  • var pattern = new RegExp( "((way )?too sexy)", "gi" );
  •  
  • // Loop over the matches, passing each set of captured groups
  • // to the given function. In this case, the second captured
  • // group will be the OPTIONAL part of the pattern.
  • test.replace(
  • pattern,
  • function( $0, $1, $2 ){
  •  
  • // Alert the TYPE of data type passed-in for the non-
  • // captured group value.
  • alert( typeof( $2 ) );
  •  
  • // Alert the boolean-cast of the group.
  • alert( !!$2 );
  •  
  • }
  • );
  •  
  • </script>
  • </head>
  • <body>
  • <!--- Left intentially blank. --->
  • </body>
  • </html>

Here, I am looking for the regular expression pattern:

"((way )?too sexy)"

In this pattern, the substring, "way ", is an optional, captured group and will, in fact, not be matched in our test string, "You are just too sexy!". In this scenario, we can then see how the different browsers pass in the second captured (but not matched) group.

I tested this in Firefox, Chrome, IE, and Safari and here is what we get:

Firefox:
string
false

Chrome:
undefined
false

Safari:
undefined
false

IE:
undefined
false

As it turns out, Firefox is the odd man out here, being the only browser that passes in an empty string for non-matching groups. All of the other browsers pass in "undefined" / null data types for non-matching groups. While this difference is strange, the upside is that both empty strings and undefined values are "falsey" values in Javascript and can be implicitly cast to False for control flow decisions. I know some people frown upon the use of truthy / falsey values as Conditions, but when different browsers pass in different falsey data types, this feature really helps us to simplify our control flow logic.

Note to self: be sure to test Javascript in at least two browsers!




Reader Comments

Post A Comment

?
You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.