Javascript/преобразовать строку стиля CSS в объект JS

Ответ 1

Вы можете использовать функцию разделения Javascript: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/split

Сначала разделите строку с помощью ; в качестве разделителя, а затем для каждого результата, разбитого на :, поместите элементы в объект по мере продвижения.

например.

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(':');
}

Ответ 2

Очень простой:

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

Ответ 3

В функциональной форме:

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;
}, {});

Обрезать строки перед их использованием в качестве объектных ключей.

Ответ 4

Кажется, что все ответы требуют много расщепления - почему бы не сделать совпадение и не получить все пары за один раз?

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

Ответ 5

Просто для удовольствия и для полноты...

Я не проверял совместимость между браузерами (только в Chrome), и у него есть некоторые причуды:

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;
}

Quirk заключается в том, что, хотя мы прошли в одном объявлении margin, мы получаем объект вроде

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

Это может быть хорошей или плохой в зависимости от того, что вы после.

Ответ 6

что-то вроде этого должно быть довольно близко:

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

... витки

" border:solid 1px; color:red "

в

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

Ответ 7

Это моя функция для преобразования строки CSS в объект:

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;
};

Ответ 8

Здесь мой прием

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;") );