From 9b8301aab8f63196d60a8b0a715faec452d8e79c Mon Sep 17 00:00:00 2001 From: Stefan Fejes Date: Fri, 16 Oct 2020 20:48:31 +0200 Subject: [PATCH] add toHSLObject (#1617) * add toHSLObject * correct hsl destructure naming * add % sign to saturation and lightness --- snippets/toHSLObject.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 snippets/toHSLObject.md diff --git a/snippets/toHSLObject.md b/snippets/toHSLObject.md new file mode 100644 index 000000000..b864c110e --- /dev/null +++ b/snippets/toHSLObject.md @@ -0,0 +1,21 @@ +--- +title: toHSLObject +tags: string,browser,regexp,intermediate +--- + +Converts an `hsl()` color string to an object with the values of each color. + +- Use `String.prototype.match()` to get an array of 3 string with the numeric values. +- Use `Array.prototype.map()` in combination with `Number` to convert them into an array of numeric values. +- Use array destructuring to store the values into named variables and create an appropriate object from them. + +```js +const toHSLObject = hslStr => { + const [hue, saturation, lightness] = hslStr.match(/\d+/g).map(Number); + return { hue, saturation, lightness }; +}; +``` + +```js +toHSLObject("hsl(50,10%,10%)"); // { hue: 50, saturation: 10, lightness: 10 } +```