Javascript - совпадение и разбор строки цвета Hsl с регулярным выражением

Question

Я пытаюсь разобрать строку цвета hsl и получить из нее шестнадцатеричную строку цвета. Я попытался использовать регулярное выражение, но не могу понять. Как мое регулярное выражение должно выглядеть так, чтобы соответствовать и анализировать строку цвета hsl для оттенков, насыщенности и значений. Вход будет одним из нижних;

- hsl(162,11.984633448805383%,81.17647058823529%) 
- hsl(162, 11.984633448805383%, 81.17647058823529%) <= there are 
    space's between fields. 

Спасибо.

Answer 1

Это, вероятно, как бы я справиться с этим

/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g 

Answer 2

Как насчет:

/hsl\((\d+),\s*(\d+(?:\.\d+))%,\s*(\d+(?:\.\d+))%\)/ 

объяснение:

The regular expression: 

(?-imsx:/hsl\((\d+),\s*(\d+(?:\.\d+))%,\s*(\d+(?:\.\d+))%\)/) 

matches as follows: 

NODE      EXPLANATION 
---------------------------------------------------------------------- 
(?-imsx:     group, but do not capture (case-sensitive) 
         (with^and $ matching normally) (with . not 
         matching \n) (matching whitespace and # 
         normally): 
---------------------------------------------------------------------- 
    /hsl      '/hsl' 
---------------------------------------------------------------------- 
    \(      '(' 
---------------------------------------------------------------------- 
    (      group and capture to \1: 
---------------------------------------------------------------------- 
    \d+      digits (0-9) (1 or more times (matching 
          the most amount possible)) 
---------------------------------------------------------------------- 
)      end of \1 
---------------------------------------------------------------------- 
    ,      ',' 
---------------------------------------------------------------------- 
    \s*      whitespace (\n, \r, \t, \f, and " ") (0 or 
          more times (matching the most amount 
          possible)) 
---------------------------------------------------------------------- 
    (      group and capture to \2: 
---------------------------------------------------------------------- 
    \d+      digits (0-9) (1 or more times (matching 
          the most amount possible)) 
---------------------------------------------------------------------- 
    (?:      group, but do not capture: 
---------------------------------------------------------------------- 
     \.      '.' 
---------------------------------------------------------------------- 
     \d+      digits (0-9) (1 or more times 
           (matching the most amount possible)) 
---------------------------------------------------------------------- 
    )      end of grouping 
---------------------------------------------------------------------- 
)      end of \2 
---------------------------------------------------------------------- 
    %,      '%,' 
---------------------------------------------------------------------- 
    \s*      whitespace (\n, \r, \t, \f, and " ") (0 or 
          more times (matching the most amount 
          possible)) 
---------------------------------------------------------------------- 
    (      group and capture to \3: 
---------------------------------------------------------------------- 
    \d+      digits (0-9) (1 or more times (matching 
          the most amount possible)) 
---------------------------------------------------------------------- 
    (?:      group, but do not capture: 
---------------------------------------------------------------------- 
     \.      '.' 
---------------------------------------------------------------------- 
     \d+      digits (0-9) (1 or more times 
           (matching the most amount possible)) 
---------------------------------------------------------------------- 
    )      end of grouping 
---------------------------------------------------------------------- 
)      end of \3 
---------------------------------------------------------------------- 
    %      '%' 
---------------------------------------------------------------------- 
    \)      ')' 
---------------------------------------------------------------------- 
/      '/' 
---------------------------------------------------------------------- 
)      end of grouping 
---------------------------------------------------------------------- 

Answer 3

/(.*?)hsl\((\d+),(\d+)%,(\d+)%\)/.exec(color) 

Прежде всего, здесь не обязательно (.*?). exec будет искать любое совпадение в строке.

Тогда, чтобы пространства (любое число, в том числе 0), просто положить \s* между запятыми (я добавил еще немного слишком близко к скобки на всякий случай):

/hsl\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)/.exec(color) 

Далее, вы должны позволить периодов в регулярном выражении, и если вы уверены, что не может быть каких-либо недействительные номера, вы можете использовать:

/hsl\(\s*(\d+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*\)/.exec(color) 

Где [\d.] класс символов, который принимает оба числа и периоды. В противном случае, если вы можете иметь недопустимые номера и не хотите, чтобы получить их, используйте:

/hsl\(\s*(\d+)\s*,\s*(\d+(?:\.\d+)?%)\s*,\s*(\d+(?:\.\d+)?%)\)/.exec(color) 

Где (\d+(?:\.\d+)?%) принимает действительное число с плавающей точкой, за которой следует знак процента.

И вы можете применить регулярное выражение, как это:

color = 'hsl(162, 11.984633448805383%, 81.17647058823529%)'; 
regexp = /hsl\(\s*(\d+)\s*,\s*(\d+(?:\.\d+)?%)\s*,\s*(\d+(?:\.\d+)?%)\)/g; 
res = regexp.exec(color).slice(1); 
alert("Hue: " + res[0] + "\nSaturation: " + res[1] + "\nValue: " + res[2]); 

jsfiddle demo.

.slice(1) удаляет совпадение строк, так что у вас есть только захваченные группы в массиве res.