const regex = /^hsla?\(\s*(?<h>[-+]?\d{1,3}(?:\.\d+)?)(deg|grad|rad|turn)?\s*(?:,\s*|\s+)\s*(?<s>[-+]?\d{1,3}(?:\.\d+)?)%\s*(?:,\s*|\s+)\s*(?<l>[-+]?\d{1,3}(?:\.\d+)?)%\s*(?:,\s*|\s+)?(?:\s*\/?\s*(?<alpha>[-+]?[\d.]+%?)\s*)?\)$/gmi;
// Alternative syntax using RegExp constructor
// const regex = new RegExp('^hsla?\\(\\s*(?<h>[-+]?\\d{1,3}(?:\\.\\d+)?)(deg|grad|rad|turn)?\\s*(?:,\\s*|\\s+)\\s*(?<s>[-+]?\\d{1,3}(?:\\.\\d+)?)%\\s*(?:,\\s*|\\s+)\\s*(?<l>[-+]?\\d{1,3}(?:\\.\\d+)?)%\\s*(?:,\\s*|\\s+)?(?:\\s*\\\/?\\s*(?<alpha>[-+]?[\\d.]+%?)\\s*)?\\)$', 'gmi')
const str = `
hsl(.9, .99%, .999%, .9999)
hsl(0240, 0100%, 0050%, 01)
hsl(2400, 1000%, 1000%, 10)
hsl(-2400.01deg, -1000.5%, -1000.05%, -100)
hsl(2.40e+2, 1.00e+2%, 5.00e+1%, 1E-3)
hsl(-240, -100%, -50%, -0.1)
hsl(+240, +100%, +50%, +0.1)
HSL(240Deg, 100%, 50%)
hsl(240, 100%, 50%, 10%)
hsl(150deg 30% 60%)
hsl(0.3turn 60% 45% .7)
hsl(0.3grad 60% 45% / .7)
hsl(0.3rad 60% 45% / .7)
hsl(12 60% 45% / .7)
hsl(120, 100%, 50%)
hsl(0, 0%, 0%)
hsl(60, 50%, 75%)
hsl(270, 80%, 60%)
hsl(200, 20%, 40%)
hsl(340, 90%, 80%)
hsla(120, 100%, 50%, 0.5)
hsla(0, 0%, 0%, 0.2)
hsla(60, 50%, 75%, 0.8)
hsla(270, 80%, 60%, 0.4)
hsla(200, 20%, 40%, 0.6)
hsla(340, 90%, 80%, 0.1)
hsl(120 100% 50%)
hsl(0 0% 0%)
hsl(60 50% 75%)
hsl(270 80% 60%)
hsl(200 20% 40%)
hsl(340 90% 80%)
hsla(120 100% 50% / 0.5)
hsla(0 0% 0% / 0.2)
hsla(60 50% 75% / 0.8)
hsla(270 80% 60% / 0.4)
hsla(200 20% 40% / 0.6)
hsla(340 90% 80% / 0.1)
hsl(240, 100%, 50%)
hsl(240, 100%, 50%, 0.1)
hsl(240,100%,50%,0.1)
hsl(180deg, 100%, 50%, 0.1)
hsl(3.14rad, 100%, 50%, 0.1)
hsl(200grad, 100%, 50%, 0.1)
hsl(0.5turn, 100%, 50%, 0.1)
hsl(240.5, 99.99%, 49.999%, 0.9999)
hsl(240.0, 100.00%, 50.000%, 1.0000)
hsl(240 100% 50%)
hsl(240 100% 50% / 0.1)
hsla(240, 100%, 50%)
hsla(240, 100%, 50%, 0.1)
`;
// 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