const regex = /^(?:#(?:[A-Fa-f0-9]{3}){1,2}|(?:rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}|hsl[(]\s*0*(?:[12]?\d{1,2}|3(?:[0-5]\d|60))\s*(?:\s*,\s*0*(?:\d\d?(?:\.\d+)?\s*%|\.\d+\s*%|100(?:\.0*)?\s*%)){2}\s*|(?:rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}|hsla[(]\s*0*(?:[12]?\d{1,2}|3(?:[0-5]\d|60))\s*(?:\s*,\s*0*(?:\d\d?(?:\.\d+)?\s*%|\.\d+\s*%|100(?:\.0*)?\s*%)){2}\s*,)\s*0*(?:\.\d+|1(?:\.0*)?)\s*)[)]|transparent|aqua(?:marine)?|azure|beige|bisque|black|blanchedalmond|blue(?:violet)?|(?:alice|dodger|cadet|midnight|powder|royal|sky|slate|steel)blue|(?:rosy|saddle|sandy)?brown|burlywood5|chartreuse|chocolate|coral|corn(?:flowerblue|silk)|crimson|cyan|dark(?:(?:slate)?blue|cyan|goldenrod|(?:olive|sea)?green|(?:slate)?gr[ae]y|khaki|magenta|orange|orchid|red|salmon|turquoise|violet)|deep(?:pink|skyblue)|firebrick|fuchsia|gainsboro|gold(?:enrod)?|(?:dim|slate)?gr[ae]y|(?:forest|lawn|spring)?green|greenyellow|honeydew|indigo|ivory|khaki|lavender(?:blush)?|lemonchiffon|light(?:(?:sky|steel)?blue|coral|cyan|goldenrodyellow|(?:slate)?gr[ae]y|green|pink|salmon|seagreen|yellow)|lime(?:green)?|linen|magenta|maroon|medium(?:aquamarine|(?:slate)?blue|orchid|purple|s(?:ea|pring)green|turquoise|violetred)|mintcream|mistyrose|moccasin|navy|oldlace|olive(?:drab)?|orange(?:red)?|orchid|pale(?:goldenrod|green|turquoise|violetred)|papayawhip|peachpuff|peru|(?:hot)?pink|plum|purple|(?:indian)?red|salmon|sea(?:green|shell)|sienna|silver|snow|tan|teal|thistle|tomato|turquoise|violet|wheat|whitesmoke|(?:antique|floral|ghost|navajo)?white|yellow(?:green)?)$/gm;
// Alternative syntax using RegExp constructor
// const regex = new RegExp('^(?:#(?:[A-Fa-f0-9]{3}){1,2}|(?:rgb[(](?:\\s*0*(?:\\d\\d?(?:\\.\\d+)?(?:\\s*%)?|\\.\\d+\\s*%|100(?:\\.0*)?\\s*%|(?:1\\d\\d|2[0-4]\\d|25[0-5])(?:\\.\\d+)?)\\s*(?:,(?![)])|(?=[)]))){3}|hsl[(]\\s*0*(?:[12]?\\d{1,2}|3(?:[0-5]\\d|60))\\s*(?:\\s*,\\s*0*(?:\\d\\d?(?:\\.\\d+)?\\s*%|\\.\\d+\\s*%|100(?:\\.0*)?\\s*%)){2}\\s*|(?:rgba[(](?:\\s*0*(?:\\d\\d?(?:\\.\\d+)?(?:\\s*%)?|\\.\\d+\\s*%|100(?:\\.0*)?\\s*%|(?:1\\d\\d|2[0-4]\\d|25[0-5])(?:\\.\\d+)?)\\s*,){3}|hsla[(]\\s*0*(?:[12]?\\d{1,2}|3(?:[0-5]\\d|60))\\s*(?:\\s*,\\s*0*(?:\\d\\d?(?:\\.\\d+)?\\s*%|\\.\\d+\\s*%|100(?:\\.0*)?\\s*%)){2}\\s*,)\\s*0*(?:\\.\\d+|1(?:\\.0*)?)\\s*)[)]|transparent|aqua(?:marine)?|azure|beige|bisque|black|blanchedalmond|blue(?:violet)?|(?:alice|dodger|cadet|midnight|powder|royal|sky|slate|steel)blue|(?:rosy|saddle|sandy)?brown|burlywood5|chartreuse|chocolate|coral|corn(?:flowerblue|silk)|crimson|cyan|dark(?:(?:slate)?blue|cyan|goldenrod|(?:olive|sea)?green|(?:slate)?gr[ae]y|khaki|magenta|orange|orchid|red|salmon|turquoise|violet)|deep(?:pink|skyblue)|firebrick|fuchsia|gainsboro|gold(?:enrod)?|(?:dim|slate)?gr[ae]y|(?:forest|lawn|spring)?green|greenyellow|honeydew|indigo|ivory|khaki|lavender(?:blush)?|lemonchiffon|light(?:(?:sky|steel)?blue|coral|cyan|goldenrodyellow|(?:slate)?gr[ae]y|green|pink|salmon|seagreen|yellow)|lime(?:green)?|linen|magenta|maroon|medium(?:aquamarine|(?:slate)?blue|orchid|purple|s(?:ea|pring)green|turquoise|violetred)|mintcream|mistyrose|moccasin|navy|oldlace|olive(?:drab)?|orange(?:red)?|orchid|pale(?:goldenrod|green|turquoise|violetred)|papayawhip|peachpuff|peru|(?:hot)?pink|plum|purple|(?:indian)?red|salmon|sea(?:green|shell)|sienna|silver|snow|tan|teal|thistle|tomato|turquoise|violet|wheat|whitesmoke|(?:antique|floral|ghost|navajo)?white|yellow(?:green)?)$', 'gm')
const str = `#0F0F0F
#123
#1234
#ABC456
#1234567
rgb(1,2,3)
rgb(1,2,)
rgb(112233)
rgb(255,249,199)
rgb(256,249,199)
rgb(255,249,199,)
rgb( 100%, 199, 50%)
rgb( 100%, 199%, 50%)
rgb(1,2,3%,.5)
rgba(1,2,3%,0.75)
rgba(1,2,3%,.5)
rgba(1,2,.5)
rgba(1,2,3)
rgba(1,249,100,1)
rgba(1,249,100,1.0)
rgba(1,249,100,1.1)
rgba(255,256,255,1)
rgba(1,249.5,100%,1)
rgba(1,249.5,101%,1)
hsl(360,2%,100%)
hsl(361,2%,100%)
hsl(,2%,100%)
hsl(360,2%,)
hsl(360,2%,0100.00%)
hsl(360,2%,101%)
hsla(180,2%,100%,0.5)
hsla(180,2%,100%,)
transparent
blue
palevioletred
lightyellow`;
// Reset `lastIndex` if this regex is defined globally
// regex.lastIndex = 0;
let m;
while ((m = regex.exec(str)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
// The result can be accessed through the `m`-variable.
m.forEach((match, groupIndex) => {
console.log(`Found match, group ${groupIndex}: ${match}`);
});
}
Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for JavaScript, please visit: https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions