Function that parses CSS styles string into JS inline style

Question

I need to create a function that parses a CSS string, that will be used on a inline js style.

E.g: what I get is something like const styles = "background-color:#FFFFFF;color:#000000" and I need to transform in:

      <h1
        className={classes}
        style={{ color: fontColor, background: backgroundColor }}
      >
        {copy}
      </h1>

what I do for now is this

const [backgroundColor, setBackgroundColor] = useState();
  const [fontColor, setFontColor] = useState();
  const colors = styles?.match(/(#)([^;]*)/g);

  useEffect(() => {
    if (colors) {
      if (colors.length > 1) {
        setBackgroundColor(colors[0]);
        setFontColor(colors[1]);
      }

      if (colors.length === 1) {
        setFontColor(colors[0]);
      }
    }
  }, [colors]);

But I was asked to create pure seperate function that parses the styles string.

So I was wondering if there's a solution where I don't need to "regex" each specific selector and then its value. If there's something like whatever is before the colon is the selector than after that until the semicolon is its value.

Any tips?

Thanks

yes its possible

Nisharg Shah
– Nisharg Shah

2020-11-27 14:36:48 +00:00
Commented Nov 27, 2020 at 14:36 — Nisharg Shah
– Nisharg Shah, Commented Nov 27, 2020 at 14:36

Nisharg Shah · Accepted Answer · 2020-11-27 16:01:46Z

2

You can do it like this and after that map your function with it

const styles = "background-color:#FFFFFF;color:#000000";

const css = styles.split(';').map(cur => cur.split(':'));

console.log(css);

const cssInObject = styles.split(';').map(cur => cur.split(':')).reduce((acc, val) => {
    let [key, value] = val;
    key = key.replace(/-./g, css => css.toUpperCase()[1])
    acc[key] = value;
    return acc;
}, {});

console.log(cssInObject);

edited Nov 27, 2020 at 16:01

answered Nov 27, 2020 at 14:37

Nisharg Shah

20k12 gold badges70 silver badges78 bronze badges

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

4 Comments

Nisharg Shah Over a year ago

I added react way of css, look out

danihazler Over a year ago

your solution works also on Safari!.. Great! Thanks! :)

Nisharg Shah Over a year ago

I glad you like my answer, Thanks :)

Michael B. Over a year ago

Be careful when using this for more complex CSS, as url and others may contain :/; e.g. background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20...%3E");

Humpff · Accepted Answer · 2020-12-10 13:09:08Z

2

Maybe something like this (which converts the css string to an object) (doesn't work on Safari):

const convertCssToObject = value => {
    
  const regex = /(?<=^|;)\s*([^:]+)\s*:\s*([^;]+)\s*/g, o = {};
  value.replace(regex, (m,p,v) => o[p] = v);
  return o;
    
}

console.log( convertCssToObject("background-color:#FFFFFF;color:#000000;") )

I've edited the regex so it works also on Safari:

const convertCssToObject = value => {
  // Without the look behind
  const regex = /([\w-.]+)\s*:([^;]+);?/g, o = {}; // Heck I think this should also work for Chrome as well
  value.replace(regex, (m,p,v) => o[p] = v);
  return o;
}

console.log( convertCssToObject("background-color:#FFFFFF;color:#000000;") )

edited Dec 10, 2020 at 13:09

answered Nov 27, 2020 at 14:57

Humpff

3281 silver badge10 bronze badges

2 Comments

danihazler Over a year ago

unfortunately, I was just flagged that your solution does not work on Safari. I really liked cause it is very concise, but in the end, I won't be able to use it. Thanks anyway

Humpff Over a year ago

Ah I guess Safari doesn't like to "look back". I'll update my comment

Collectives™ on Stack Overflow

Function that parses CSS styles string into JS inline style

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related