Dado un color en forma de rgb() o rgba() y la tarea es convertirlo en un objeto donde las claves son los nombres de los colores y los valores son los valores de los colores.
Ejemplo:
Input: rgb(242, 52, 110) Output: { red: 242, green: 52, blue: 110 } Input: rgba(255, 99, 71, 0.5) Output: { red: 255, green: 99, blue: 71, alpha: 0.5 }
Enfoque: Para lograr esto utilizamos el siguiente enfoque.
- Almacene el color en una variable llamada rgb.
- Cree una array llamada colors que contenga los nombres de los colores rojo, verde, azul y alfa.
- Cree una variable llamada colorArr en la que almacenamos los valores de color de la entrada rgb. Por ejemplo: [“255”, “99”, “71”, 0.5], para lograr esto cortamos el rgb desde donde está el “(“ presente hasta donde está el “)” . Ahora tienes la string «255, 99, 71, 0.5». Ahora divida la array desde donde está presente el «,» . Ahora obtienes la array [“255″, ’99”, “71”, “0.5”].
- Ahora crea un objeto vacío.
- Aplique forEach loop en colorArr y para cada iteración inserte el nombre del color y el valor del color en el objeto.
- Ahora imprime el objeto.
Javascript
<script> let rgb = "rgba(255, 99, 71, 0.5)" let colors = ["red", "green", "blue", "alpha"] // Getting the index of "(" and ")" // by using the indexOf() method let colorArr = rgb.slice( rgb.indexOf("(") + 1, rgb.indexOf(")") ).split(", "); let obj = new Object(); // Insert the values into obj colorArr.forEach((k, i) => { obj[colors[i]] = k }) console.log(obj) </script>
Producción:
{ alpha: "0.5", blue: "71", green: "99", red: "255" }
Envuelve la lógica dentro de una función
Javascript
<script> function rgbToObj(rgb) { let colors = ["red", "green", "blue", "alpha"] let colorArr = rgb.slice( rgb.indexOf("(") + 1, rgb.indexOf(")") ).split(", "); let obj = new Object(); colorArr.forEach((k, i) => { obj[colors[i]] = k }) return obj; } console.log(rgbToObj("rgb(255, 99, 71)")) console.log(rgbToObj("rgb(255, 99, 71, 0.5)")) </script>
Producción:
{ blue: "71", green: "99", red: "255" } { alpha: "0.5", blue: "71", green: "99", red: "255" }
Publicación traducida automáticamente
Artículo escrito por _saurabh_jaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA