Блог

Мне нужно создать функцию, которая анализирует строку CSS, которая будет использоваться во встроенном стиле js.

Например: то, что я получаю, это что-то вроде const styles = "background-color:#FFFFFF;color:#000000" , и мне нужно преобразовать в:

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

что я сейчас делаю, так это

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

Но меня попросили создать чистую отдельную функцию, которая анализирует строку стилей.

Итак, мне было интересно, есть ли решение, в котором мне не нужно «регулярно выражать» каждый конкретный селектор, а затем его значение. Если есть что-то вроде того, что перед двоеточием является селектором, чем после этого, пока точка с запятой не станет его значением.

Какие-нибудь советы?

Спасибо

Вы можете сделать это следующим образом, а затем сопоставить с ней свою функцию

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

Может быть, что-то вроде этого (которое преобразует строку css в объект) (не работает в 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;") )

 

Я отредактировал регулярное выражение, чтобы оно работало и в 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;") )