Как сгруппировать объект по стилям с помощью регулярных выражений?

Question

У меня есть строка

" 'backgroundColor': someVaraible,
  'border': '1px solid red',
  'line-height': 1,
  'background-color': 'rgba(142, 27, 95, 1)' "

Как получить массив строк с помощью Regexp?

[
  "'backgroundColor': someVaraible",
  "'border': '1px solid red'",
  "'line-height': 1",
  "'background-color': 'rgba(142, 27, 95, 1)'"
 ]

Answer 1

Вы можете использовать разделение с регулярным выражением, которое ищет запятые, которые не заключены в круглые скобки (это отрицательный взгляд).

/,(?![^(]+\))/

let items = "'backgroundColor': someVaraible, 'border': '1px solid red', 'line-height': 1, 'background-color': 'rgba(142, 27, 95, 1)'"
  
console.log(
  // Split on commas not between parentheses
  items.split(/,(?![^(]+\))/)
    // Do some cleanup on the strings
    // trim() -> trim the trailing whitespace
    .map(i=>i.trim())
)

Answer 2

Возможно, вы просто хотите выполнить произвольное сопоставление строк и не поддерживать весь синтаксис CSS. В вашем примере вы можете просто разбить строку на разрывы строк:

var items = str.split(/\r?\n/);

Анализ всего допустимого синтаксиса CSS будет очень сложным. В браузере вы можете использовать встроенный синтаксический анализатор CSS для извлечения отдельных правил:

var doc = document.implementation.createHTMLDocument(''),
    style = document.createElement('style');
style.textContent = '.myClass {color: #000;}';
doc.body.appendChild(style);
console.log(style.sheet.cssRules);  // List of CSS rules

Answer 3

Самый простой метод - использовать String.split (). В вашем случае просто используйте "," в качестве разделителя. https://www.w3schools.com/jsref/jsref_split.asp