👀 Views: 82 💬 Answers: 1 📅 Created: 2025-06-11

regex javascript css validation JavaScript

I've been struggling with this for a few days now and could really use some help. After trying multiple solutions online, I still can't figure this out... I'm sure I'm missing something obvious here, but I'm trying to validate CSS hexadecimal color codes using regex in JavaScript, but I'm running into issues with optional hash symbols in front of the color values. My goal is to match both formats: `#RRGGBB` and `RRGGBB` (without the hash). Here's the regex I've been using: ```javascript const hexColorRegex = /#?([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})/; ``` When I test it against the following strings: ```javascript const color1 = '#FF5733'; const color2 = 'FF5733'; const color3 = '#F53'; const color4 = 'F53'; const color5 = '1234567'; // invalid ``` I found that `color1`, `color2`, and `color3` match correctly, but `color4` does not match even though it's a valid shorthand for `#FF5333`. The regex seems to only match the first three hex digits without the hash. Additionally, `color5` is incorrectly matching as well. I've also tried using the following regex, thinking it might help: ```javascript const hexColorRegex = /#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})/; ``` But it doesn't resolve the scenario. I suspect that the validation logic is not capturing the shorthand hex code correctly. Can someone guide to understand what I might be missing or suggest a corrected regex? I’m using Node.js version 14.x for my project. Am I missing something obvious? This is part of a larger microservice I'm building. What's the correct way to implement this? I recently upgraded to Javascript LTS. Hoping someone can shed some light on this.