Run results for: Regex vs Substring vs String manipulation

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser: Chrome 126

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Script Preparation code:

var color = '#FFFFFF';
var textColor = '';

Tests:

Regex
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color); if (result !== null) { var R = parseInt(result[1], 16); var G = parseInt(result[2], 16); var B = parseInt(result[3], 16); var luminance = (0.299 * R + 0.587 * G + 0.114 * B) / 255; if (luminance > 0.5) { textColor = '#000000'; } else { textColor = '#FFFFFF'; } }
Substring
if (color.slice(0, 1) === '#') { color = color.slice(1); } var R = parseInt(color.substring(0, 2), 16); var G = parseInt(color.substring(2, 4), 16); var B = parseInt(color.substring(4, 6), 16); if (R && G && B) { var yiq = (R * 299 + G * 587 + B * 114) / 1000; if (yiq >= 128) { textColor = '#000000'; } else { textColor = '#FFFFFF'; } }
Direct string manipulation
if (color.slice(0, 1) === '#') { color = color.slice(1); } var R = parseInt(color[0] + color[1], 16); var G = parseInt(color[2] + color[3], 16); var B = parseInt(color[4] + color[5], 16); if (R && G && B) { var yiq = (R * 299 + G * 587 + B * 114) / 1000; if (yiq >= 128) { textColor = '#000000'; } else { textColor = '#FFFFFF'; } }