Javascript-使用Regex匹配和解析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+),(\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演示。

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