Javascript/convertir cadena de estilo CSS en el objeto JS

Question

Nos gustaría convertir un estilo CSS introducido como cadena en un objeto JS.

Por ejemplo,

var input = " border:solid 1px; color:red "; 

esperada objeto JS:

{ 
    border:"solid 1px", 
    color:"red" 
} 

Por supuesto, el número de entradas de estilo es ilimitado, así como los nombres de estilo (borde, color, tipo de letra, z-index , etc ...) Gracias.

Answer 1

Se podría utilizar la función de división Javascript: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/split

Primera división de la cadena con ; como separador, y luego para cada fracción de resultado con :, la colocación de los elementos de un objeto a medida que avanza.

p. Ej.

var result = {}, 
    attributes = input.split(';'); 

for (var i = 0; i < attributes.length; i++) { 
    var entry = attributes[i].split(':'); 
    result[entry.splice(0,1)[0]] = entry.join(':'); 
} 

Answer 2

algo como esto debe obtener bastante cerca:

var input = " border:solid 1px; color:red "; 
var output = '{' + input.replace(/([\w-.]+)\s*:([^;]+);?/g, '\n $1:"$2",') + '\n}'; 

... giros

" border:solid 1px; color:red " 

en

{ 
    border:"solid 1px", 
    color:"red ", 
} 

Answer 3

En una forma funcional:

var styleInput = " border:solid 1px; color:red "; 

var result = styleInput.split(';').reduce(function (ruleMap, ruleString) { 
    var rulePair = ruleString.split(':'); 
    ruleMap[rulePair[0].trim()] = rulePair[1].trim(); 

    return ruleMap; 
}, {}); 

Recorte las cuerdas antes de usarlas como teclas de objeto.

Answer 4

Todas las respuestas parecen necesitar mucha división, ¿por qué no hacer una coincidencia y obtener todos los pares de una vez?

function cssSplit(str){ 
    var O= {}, 
    S= str.match(/([^ :;]+)/g) || []; 
    while(S.length){ 
     O[S.shift()]= S.shift() || ''; 
    } 
    return O; 
} 

Answer 5

Esta es mi función para convertir cadena de CSS para objetar:

function cssConverter(style) { 
    var result = {}, 
     attributes = style.split(';'), 
     firstIndexOfColon, 
     i, 
     key, 
     value; 

    for(i=0; i<attributes.length; i++) { 
     firstIndexOfColon = attributes[i].indexOf(":"); 
     key = attributes[i].substring(0, firstIndexOfColon); 
     value = attributes[i].substring(firstIndexOfColon + 1); 

     key = key.replace(/ /g, ""); 
     if(key.length < 1){ 
      continue; 
     } 

     if(value[0] === " "){ 
      value = value.substring(1); 
     } 

     if(value[value.length - 1] === " "){ 
      value = value.substring(0, value.length - 1); 
     } 

     result[key] = value; 
    } 

    return result; 
}; 

Answer 6

muy simple:

var regex = /([\w-]*)\s*:\s*([^;]*)/g; 
var match, properties={}; 
while(match=regex.exec(cssText)) properties[match[1]] = match[2].trim(); 

https://regex101.com/r/nZ4eX5/1

Answer 7

Esta es mi opinión

function cssToObj(css) { 
 
    var obj = {}, s = css.toLowerCase().replace(/-(.)/g, function (m, g) { 
 
     return g.toUpperCase(); 
 
    }).replace(/;\s?$/g,"").split(/:|;/g); 
 
    for (var i = 0; i < s.length; i += 2) 
 
     obj[s[i].replace(/\s/g,"")] = s[i+1].replace(/^\s+|\s+$/g,""); 
 
    return obj; 
 
} 
 

 

 
console.log(cssToObj("z-index: 4; opacity:1; transition-duration: 0.3s;"));

Answer 8

sólo por diversión y para completar ...

No he comprobado la compatibilidad entre navegadores (sólo probado en Chrome), y tiene algunas peculiaridades:

var input = "font-weight:bold; color: blue; margin: 0 15px"; 

var e = document.createElement("div"); 
e.setAttribute("style", input); 

var output = {}; 

for (var i = 0; i < e.style.length; i++) { 
    var name = e.style[i]; 
    var value = e.style.getPropertyValue(name); 
    output[name] = value; 
} 

El La peculiaridad es que, aunque pasamos en una sola declaración margin, obtenemos un objeto como

{ 
    color: "blue", 
    font-weight: "bold", 
    margin-bottom: "0px", 
    margin-left: "15px", 
    margin-right: "15px", 
    margin-top: "0px", 
} 

Esto podría ser bueno o malo según lo que está buscando.