getRGB: cached regexp vs not

Benchmark created by Andrew Petersen on August 8, 2011

Description

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
  var colors = {
   transparent: [255,255,255]
  }
  
  var  rgbNNN = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/
        ,rgbPPP = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/
        ,hexSix = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/
        ,hexThree = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/
        ,safari3Transparent = /rgba\(0, 0, 0, 0\)/
  
  function getRGB2(color) {
        var result;
  
        // Check if we're already dealing with an array of colors
        if ( color && color.constructor == Array && color.length == 3 )
                        return color;
  
        // Look for rgb(num,num,num)
        if (result = color.match(rgbNNN))
                        return [parseInt(result[1],10), parseInt(result[2],10), parseInt(result[3],10)];
  
        // Look for rgb(num%,num%,num%)
        if (result = color.match(rgbPPP))
                        return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
  
        // Look for #a0b1c2
        if (result = color.match(hexSix))
                        return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
  
        // Look for #fff
        if (result = color.match(hexThree))
                        return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
  
        // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
        if (result = color.match(safari3Transparent))
                        return colors['transparent'];
  
        // Otherwise, we're most likely dealing with a named color
        return colors[$.trim(color).toLowerCase()];
  }
  
  function getRGB1(color) {
                var result;
  
                // Check if we're already dealing with an array of colors
                if ( color && color.constructor === Array && color.length === 3 )
                                return color;
  
                // Look for rgb(num,num,num)
                if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
                                return [parseInt(result[1],10), parseInt(result[2],10), parseInt(result[3],10)];
  
                // Look for rgb(num%,num%,num%)
                if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
                                return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
  
                // Look for #a0b1c2
                if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
                                return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
  
                // Look for #fff
                if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
                                return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
  
                // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
                if (result = /rgba\(0, 0, 0, 0\)/.exec(color))
                                return colors["transparent"];
  
                // Otherwise, we're most likely dealing with a named color
                return colors[$.trim(color).toLowerCase()];
  }
</script>

Test runner

getRGB2('rgb(0,0,0)');

getRGB2('rgb(0%,0%,0%)');

getRGB2('#000000');

getRGB2('#000')

getRGB2('rgba(0, 0, 0, 0)')

getRGB1('rgb(0,0,0)');

getRGB1('rgb(0%,0%,0%)');

getRGB1('#000000');

getRGB1('#000')

getRGB1('rgba(0, 0, 0, 0)')

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by Andrew Petersen on August 8, 2011