0

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

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

谢谢。

4

3 回答 3

6 
/(.*?)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)

Where[\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 演示。

.slice(1)删除字符串匹配，以便您在res数组中只有捕获的组。

于 2013-10-10T07:51:53.890 回答
5

这大概就是我的处理方式

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

正则表达式可视化

于 2013-10-10T07:31:18.333 回答
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
----------------------------------------------------------------------
于 2013-10-10T07:27:40.167 回答