Javascript / 将CSS样式字符串转成JS object

Question

We'd like to convert a CSS style entered as string into a JS object.

Eg,

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

expected JS object:

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

Of course the number of style entries is unlimited as well as the names of style (border, color, font, z-index, etc...). Thx.

Answer 1

A very simple one:

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 2

You could use the Javascript split function: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/split

First split the string with ;as the separator, and then for each result split with : , placing the items in an object as you go.

eg

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 3

In a functional form:

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

Trim the strings before using them as object keys.

Answer 4

Stylesheet string to element style using JavaScript

Use just the string, CSSStyleDeclaration.cssText :

 const styles = "color: black; background: orange; font-size: 2em;"; document.querySelector("#test").style.cssText = styles;

 <div id="test">Lorem Ipsum</div>

JavaScript Implementation

otherwise, if you need to convert a style string to Object:

 const css2obj = css => { const r = /(?<=^|;)\\s*([^:]+)\\s*:\\s*([^;]+)\\s*/g, o = {}; css.replace(r, (m,p,v) => o[p] = v); return o; } console.log( css2obj("z-index: 4; opacity:1; transition-duration: 0.3s;") )

In case you want to convert dash-case CSS properties to JS representations in camelCase , instead of p use p.replace(/-(.)/g, (m,p) => p.toUpperCase())

---

Oldschool JS:

 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 5

All the answers seem to need a lot of splitting- why not do a match and get all the pairs in one go?

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

Answer 6

Just for fun and for completeness…

I haven't checked cross-browser compatibility (only tried in Chrome), and it has some quirks:

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

The quirk is that even though we passed in a single margin declaration, we get an object like

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

This might be a good or a bad thing depending on what you're after.

Answer 7

If you want a tagged template literal syntax that works easily with React, you could do

 const camelCase = str => str.replace(/-(.)/g, (_,p) => p.toUpperCase()) const css2obj = (strings, ...vals) => { const css = strings.reduce((acc, str, i) => acc + str + (vals[i] || ''), '') const r = /(?<=^|;)\\s*([^:]+)\\s*:\\s*([^;]+)\\s*/g, o = {} css.replace(r, (m,p,v) => o[camelCase(p)] = v) return o } const center = 'center' const reactInlineCSS = css2obj` align-items: ${center}; justify-content: ${center}; ` console.log(reactInlineCSS)

Answer 8

This is my function to convert CSS string to object:

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 9

Now you can use a third-party library such as style-to-object . For example:

import parse from 'style-to-object';

const input = " border:solid 1px; color:red ";
parse(input); // => {border: "solid 1px", color: "red"}

Answer 10

The following function works even when there are ; inside single or double quotes. Ex: content: "data;" .

function inlineStylesToObject(styles: string) : Record<string, string> {

  const regex = /([\w-]+)\s*:\s*((?:(?:"[^"]+")|(?:'[^']+')|[^;])*);?/g;

  const obj : Record<string, string> = {};

  let match;
  while (match = regex.exec(styles)) {
     obj[match[1]] = match[2].trim();
  }

  return obj;

}

Answer 11

something like this should get you pretty close:

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

...turns

" border:solid 1px; color:red "

into

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