¿Cómo convertir la string de color rgb() en un objeto en JavaScript?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *