Javascript - 匹配并用正则表达式解析Hsl颜色字符串

Question

我正在尝试解析一个hsl颜色字符串并从中获取一个十六进制颜色字符串。我尝试使用正则表达式但无法弄明白。我的正则表达式应该如何匹配并将hsl颜色字符串解析为hue，饱和度和值fileds。输入将是以下之一;

 - 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+),(\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数组中捕获的组。

Answer 3

怎么样：

/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
----------------------------------------------------------------------