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+),(\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+)?%) 接受有效的 float 后跟百分号。

您可以像这样应用正则表达式:

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 数组中仅包含捕获的组。