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

Мы хотели бы преобразовать стиль CSS, введенный в виде строки, в объект JS.

Например,

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

ожидаемый объект JS:

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

Конечно, количество элементов стиля не ограничено, как и имена стилей (граница, цвет, шрифт, z-индекс и т. Д.). Спасибо.

11
задан ic3 1 March 2012 в 15:29
поделиться

1 ответ

Если Вы хотите теговый шаблонный синтаксис литерала, который работает легко с, Реагируют, Вы могли сделать

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)
0
ответ дан 3 December 2019 в 07:05
поделиться
Другие вопросы по тегам:

Похожие вопросы: