我正在尝试解析 hsl 颜色字符串并从中获取十六进制颜色字符串。我尝试使用正则表达式但无法弄清楚。我的正则表达式应该如何匹配和解析 hsl 颜色字符串到色调、饱和度和值字段。输入将是以下之一;
- hsl(162,11.984633448805383%,81.17647058823529%)
- hsl(162, 11.984633448805383%, 81.17647058823529%) <= there are
space's between fields.
谢谢。
最佳答案
/(.*?)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]);
.slice(1)
删除字符串匹配,以便 res
数组中仅包含捕获的组。
关于Javascript - 使用正则表达式匹配和解析 Hsl 颜色字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19289537/