Extract CSS property from string using Javascript

Question

How can I extract properties and values from CSS stylesheet inside string.

Example:

var strCSS = ".box{background: red; color: white;}";

How can I extract the "background" property's value from the above line, knowing that I want to use it with complex CSS stylesheet.

Patrick Roberts · Accepted Answer · 2018-01-21 22:12:42Z

3

Using the CSSStyleSheet API, you can get the values without having to hack away with awful regular expressions and finicky string manipulations:

var strCSS = '.box{background: red; color: white;}';

function getValue(css, selector, property) {
  var style = document.createElement('style');
  style.appendChild(document.createTextNode(css));
  document.body.appendChild(style);
  var sheet = style.sheet;
  style.remove();
  var rule = Array
    .from(sheet.cssRules)
    .find(cssRule => cssRule.selectorText === selector);

  if (rule) {
    return rule.style.getPropertyValue(property);
  }
}

console.log(getValue(strCSS, '.box', 'background'));

<style>.box{background: red; color: white;}</style>

answered Jan 21, 2018 at 22:12

Patrick Roberts

52.4k10 gold badges120 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tomas Varga Over a year ago

While regular expressions might seem hacky, CSS has simple rules to follow and you don't have to mess with the DOM to get a simple string.

Patrick Roberts Over a year ago

@TomášVarga Regular expressions would not be able to handle every single hypothetical selector like .box[id="{background:blue;"] { background: red; } now, would they?

Tomas Varga Over a year ago

@PatrickRoberts thought about it as just a quick and dirty way, imho this example seems too theoretical (btw the last example of my answer works)

Tomas Varga · Accepted Answer · 2018-01-21 22:25:59Z

0

While a bit more cryptic, regular expressions are a possible approach:

var match = strCSS.match(/background:\s*([^;}]*)/)
var background = match[1]

or as one-liner

var background = strCSS.replace(/^.*background:\s*([^;}]*)[;}].*$/, '$1')

or with dynamically set property name

var propName = 'background';
var propRegex = new RegExp('^.*' + propName + ':\\s*([^;}]*)[;}].*$');
var propVal = strCSS.replace(propRegex, '$1')

edited Jan 21, 2018 at 22:25

answered Jan 21, 2018 at 22:10

Tomas Varga

1,44017 silver badges23 bronze badges

1 Comment

doubleOrt Over a year ago

I would love your solution if you didn't have to hardcode "background" into the regular expression, it would also be more useful if you could get all the properties.

doubleOrt · Accepted Answer · 2018-01-21 22:31:14Z

0

Here is a simple solution that uses no regular expressions:

const extractProperties = function extractProperties(str) {
  return str 
.substring(strCSS.indexOf('{') + 1, strCSS.indexOf('}'))
.split(";")
.map((el) => el.substring(0, el.indexOf(':')).trim())
.filter(Boolean);
};

const strCSS = ".box:hover {background: red; color: white; transform: translate(50%, 50%); font-family: arial}";
console.log(extractProperties(strCSS));

A slight variant of this function, because I only realize now that it is the values you want (not my mistake, you said "how can I get 'background' property"):

const extractValues = function extractValues(str) {
  return str 
.substring(strCSS.indexOf('{') + 1, strCSS.indexOf('}'))
.split(";")
.map((el) => el.substring(el.indexOf(':') + 1, el.length).trim())
.filter(Boolean);
};

const strCSS = ".box:hover {background: red; color: white; transform: translate(50%, 50%); font-family: arial}";
console.log(extractValues(strCSS));

edited Jan 21, 2018 at 22:31

answered Jan 21, 2018 at 22:13

doubleOrt

2,5181 gold badge17 silver badges36 bronze badges

1 Comment

doubleOrt Over a year ago

As of the question's current "wording", my answer is the only correct solution (not that it is what OP wants, now that I understand the situation).

Elle Nolan · Accepted Answer · 2018-01-21 22:44:26Z

0

Getting CSS values in JavaScript is relatively simple:

console.log( document.getElementById("foo").style.background );

If you must extract it from a string, then I'd recommend the following:

// Split CSS string into each individual property
strCSS = strCSS.split(";");

// For each property/value pair...
for (var i = 0; i < strCSS.length; i++) {

    // Split into property and value
    strCSS[i] = strCSS[i].split(":");

    // Get background value
    if (strCSS[i][0] == "background") {
        return strCSS[i][1];
    }
}

That should work.

edited Jan 21, 2018 at 22:44

answered Jan 21, 2018 at 21:58

Elle Nolan

5095 gold badges9 silver badges22 bronze badges

3 Comments

HTMLNoob Over a year ago

I think he is asking how to extract css from a css file

Al.G. Over a year ago

BTW no need to break; after return. And you've missed a closing }.

Elle Nolan Over a year ago

You have to run that snippet on the string between the { and } in the original strCSS - I forgot to clarify that.

Collectives™ on Stack Overflow

Extract CSS property from string using Javascript

4 Answers 4

3 Comments

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related