How to extract CSS3 filter functions from string with Regex

Question

I'm working on a RegEx to extract CSS3 filter functions:

let currentStyle = `blur(0em) drop-shadow(rgb(0, 0, 0) 0em 0em 0em) hue-rotate(85deg) grayscale(150%) brightness(90%) url(#mySVGFilter)`;

let fnReg = new RegExp('(^(blur|brightness|contrast|drop-shadow|hue-rotate|grayscale|invert|opacity|saturate|sepia|url).*(?:[(\)\s)|\)])$)');

// returns null or the entire string playing with other variations of the above RegEx
let matches = currentStyle.match(fnReg);

Expected output

var matches = [
 `blur(0em)`,
 `drop-shadow(rgb(0, 0, 0) 0em 0em 0em)`,
 `hue-rotate(85deg)`,
 `grayscale(150%)`,
 `brightness(90%)`,
 `url(#mySVGFilter)`
]

Problem I don't know how to make it actually work and how to simplify the RegEx, considering there are sub-groups like rgb() that have a similar pattern with other "main" groups.

Answer 1

Based on Thomas 's comment, I came to a RegEx that actually works and I want to share it with everyone, so we can improve it even more.

 // Thomas' regex let ThomasFnReg = /[az-]+\\(.*?\\)(?=\\s+[az-]+\\(.*?\\)|\\s*$)/g; // my final RegEx let fnReg = /(([az].*?)\\(.*?\\))(?=\\s([az].*?)\\(.*?\\)|\\s*$)/g; // the possible target string let targetString = `blur(0em) drop-shadow(rgb(0, 0, 0) 0em 0em 0em) hue-rotate(85deg) grayscale(150%) brightness(90%) url(#mySVGFilter)`; // test let matches0 = targetString.match(ThomasFnReg); document.body.innerHTML += '<b>Thomas\\'s RegEx results</b>'; document.body.innerHTML += '<ul>'; matches0.map(x=>document.body.innerHTML += `<li>${x}</li>`); document.body.innerHTML += '</ul>'; document.body.innerHTML += '<hr>'; let matches1 = targetString.match(fnReg); document.body.innerHTML += '<b>My RegEx results</b>'; document.body.innerHTML += '<ul>'; matches1.map(x=>document.body.innerHTML += `<li>${x}</li>`); document.body.innerHTML += '</ul>';

 body {font-size: 16px; font-family: Arial; letter-spacing:0.02em}

Both expressions return somewhat usable results, pick yours and enjoy!