Как извлечь функции фильтра CSS3 из строки с помощью Regex

Question

Я работаю над RegEx для извлечения функций CSS3 filter:

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);

Ожидаемый результат

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

Проблема Я не знаю, как заставить его работать на самом деле и как упростить RegEx, учитывая, что есть подгруппы, такие как rgb(), которые имеют сходный шаблон с другими "основными" группами.

Answer 1

Исходя из комментария Томаса , я пришел на RegEx, который действительно работает, и я хочу поделиться им со всеми, чтобы мы могли улучшить его еще больше.

// Thomas' regex
let ThomasFnReg = 
/[a-z-]+\(.*?\)(?=\s+[a-z-]+\(.*?\)|\s*$)/g;

// my final RegEx
let fnReg = 
/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\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}

Оба выражения возвращают несколько полезных результатов, выбирайте свое и наслаждайтесь!