Validate Hexadecimal Color Without Using Regex

I am figuring out how to validate hexadecimal color ('#1234a6' and '#1cf') without using regExp. Can anyone please tell me why my code is not working properly function checkHex(in

Solution 1:

No loop or charcodeat required

functioncheckHex(input) {
    var check, code, len;
    if(typeof input == 'string') {        // check it's a stringif(input[0] === "#") {            // and it starts with #
            len = input.length;
            // if (len === 4 || len === 7 || len == 5 || len == 9) { // 5 and 9 for #RGBA and #RRGGBBAAif (len === 4 || len === 7) { // and it's 4 or 7 characters
                input = input.toLowerCase(); // convert to lower case// parse it as hex and output as hex with # prefix
                check = '#' + ('00000000' + parseInt(input.substr(1), 16).toString(16)).substr(1 - len);
                // check it's the same numberreturn check === input;
            }
        }
    }
    // all other conditions fall thru to herereturnfalse;
}
console.log(checkHex("#1234a6")); // trueconsole.log(checkHex("1234a6")); // falseconsole.log(checkHex("#1234")); // falseconsole.log(checkHex("#12345t")); // falseconsole.log(checkHex("#aBc")); // trueconsole.log(checkHex("#000")); // trueconsole.log(checkHex("#00001")); // falseconsole.log(checkHex("#000001")); // true

Let me break down the check = line into it's constituent parts

check = '#' +                       // start with a '#'
('00000000' +                       // some leading zeros for profit
    parseInt(input.substr(1), 16)   // parse the text as a HEX integer - that's the 16 argument
    .toString(16)                   // now, back to a string, in HEX, again 16 argument does that
).substr(1 - len);                  // we take the last (len-1) characters to match the input length less 1 (the # is the first line)

---

To break down where your code went wrong

function checkHex(input) {
    var i, code, len;
    // If first letter isn't "#" stop executingif(input.charAt(0) !== "#") returnfalse;
     // next line should be inside the loop
    code = input.charCodeAt(i);
    for(i = 1; len = input.length, i < len; i++) {
        // you should check for length being 4 or 7, and this check should be outside the loopif(len == 3 || len == 6 ) {
            // a value can not be between 47 and 48 AND between 96 and 103 - so this is never trueif((code > 47 && code < 58) && (code > 96 && code < 103)) {
                // returning in a for loop exits the function, so even fixing all of the above this would return true if the first digit was validreturntrue;
            }
        }
        returnfalse;
    }
}

to do the above loop correctly

functioncheckHex(input) {
    var i, code, len;

    if (input[0] === "#") {
        len = input.lengthif (len == 4 || len == 7 ) {
            input = input.toLowerCase(); // rgb hex values are valid in either upper or lower casefor(i = 1; i < len; i++) {
                code = input.charCodeAt(i);
                // note the ! and the || in the next line// we want to check that the digit is NOT in 0123456789 OR abcdefif (!((code > 47 && code < 58) || (code > 96 && code < 103))) {
                    returnfalse; // not a hex digit, so return false
              }
            }
            //loop has made it all the way through, so it's correctreturntrue;
        }
    }
    returnfalse;
}

console.log(checkHex("#1234a6")); // trueconsole.log(checkHex("1234a6")); // falseconsole.log(checkHex("#1234")); // falseconsole.log(checkHex("#12345t")); // falseconsole.log(checkHex("#aBc")); // trueconsole.log(checkHex("#000")); // trueconsole.log(checkHex("#00001")); // falseconsole.log(checkHex("#000001")); // true

Solution 2:

Okay so here's a simple code snippet that does that correctly without loops etc.

You'll notice that I created a lambda function in there to deal with s starting with a #

This is to allow you to expand the notion to deal with specifications like rgb(1,2,3) and rgba(4, 5, 6, 1) etc.

    isRGB = function(s) {
    
           if(typeof(s) !== "string") 
               returnfalse;
    
           if(s[0] === '#') 
             return (function(hexStr) {
                if(hexStr.length != 3 && hexStr.length != 6)
                   returnfalse;
                return !isNaN(Number("0x" + hexStr));                  
             })(s.substr(1));
           
           returnfalse;
    }
    

    console.log(isRGB('#01a5'));
    console.log(isRGB('#0a5'));
    console.log(isRGB('#0a5029'));

Solution 3:

You may directly parse the value to number and check against the base 10 integer value:

functioncheckHex(input) {
    /*
      1193126 = 0x1234a6
      463 = 0x1cf
      1166591 = 0x11ccff
    */if(input.charAt(0) == '#') {
        var intNumber = Number(input.replace("#","0x"));
        returnisNaN(intNumber) ? false : (intNumber == 1193126 || intNumber == 463 || intNumber == 1166591);
    } else {
        returnfalse;
    }
}