JavaScript Hexadecimal 0-9 a-f color matching?

Any questions involving matching text strings to patterns - the pattern is called a "regular expression."

Moderator: General Moderators

Post Reply
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

JavaScript Hexadecimal 0-9 a-f color matching?

Post by JAB Creations »

I'm trying to figure out how to construct a JavaScript hexadecimal matcher.

The value being checked must either be three or six characters long.

The valid characters are 0-9 and a-f.

So 00f, 1ab, fff, 234abc, b235af, are examples of colors and thus valid matches. I'm actually thinking it was easier to do this with PHP. In fact I will be doing this with PHP (never trust the client) but I'm trying to get this to work with JavaScript first (working on the form to begin with so when I have the form to submit data to PHP then I'll be validating form data at the server).

I'm thinking {3} || {6} might be how I check the string's range? Oh I can already tell this is going to be oddles of fun! :mrgreen:
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: JavaScript Hexadecimal 0-9 a-f color matching?

Post by JAB Creations »

This seems to work, suggestions for improvement? I want to ensure both error alerts occur.

Code: Select all

<input class="text color" id="color_creator" name="color_creator" tabindex="3" type="text" value="" /><input class="button add" id="" name="" onclick="editor_add_color();" onkeypress="editor_add_color();" tabindex="3" type="button" value="Add #" />

Code: Select all

function editor_add_color() { custom_color = document.getElementById('color_creator').value; if (custom_color.length != '3' && custom_color.length != '6') {alert('Valid color length must be either three or six digits.'); return;} re=/^([0-9a-f]{1,2}){3}$/i; check=custom_color.match(re); if (null == check) {alert('Valid character ranges are \'0\' through \'9\' and \'a\' through \'f\'.'); return;} else {alert ('Accepted Value: '+check);}}
User avatar
prometheuzz
Forum Regular
Posts: 779
Joined: Fri Apr 04, 2008 5:51 am

Re: JavaScript Hexadecimal 0-9 a-f color matching?

Post by prometheuzz »

You can "multiply" 1 and 2 by 3:

Code: Select all

/^[0-9a-f]{3,6}$/
Don't you need to account the capital hexadecimal letters A-F?

Also, although I don't speak JavaScript, this if statement seems flawed:

Code: Select all

if (custom_color.length != '3' && custom_color.length != '6') { /* error */ }
which would accept every number except 3 and 6. Shouldn't that be:

Code: Select all

if (custom_color.length < '3' || custom_color.length > '6') { /* error */ }
HTH
Last edited by prometheuzz on Sat Apr 26, 2008 2:54 am, edited 1 time in total.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: JavaScript Hexadecimal 0-9 a-f color matching?

Post by JAB Creations »

I'm not interested in upper case letters though I could merely convert them with JavaScript.

The length works perfectly, it matches for three or six characters in length exactly either way.
User avatar
prometheuzz
Forum Regular
Posts: 779
Joined: Fri Apr 04, 2008 5:51 am

Re: JavaScript Hexadecimal 0-9 a-f color matching?

Post by prometheuzz »

Ah, I misunderstood! I though you also needed to accept lengths 4- and 5.
Then, no, I don't see anything wrong with your regex.
aCa
Forum Newbie
Posts: 11
Joined: Sun Apr 06, 2008 3:43 pm

Re: JavaScript Hexadecimal 0-9 a-f color matching?

Post by aCa »

Instead of checking for the length before you do the regex, can't you just check the length in the regex? For example with this pattern:

Code: Select all

 
^([0-9a-f]{3}$|^[0-9a-f]{6})$
 
Just a suggestion...
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: JavaScript Hexadecimal 0-9 a-f color matching?

Post by JAB Creations »

By checking the length before the regex I'm able to make users aware of the available options. The regex is strictly for invalid characters. Nothing is more annoying then, 'Error'. ...huh? What do you mean error...why did I get an error? So it was very intentional. :mrgreen:
Post Reply