JavaScript regex help

Question

Мне нужно использовать JavaScript, но я бесполезен в регулярных выражениях, поэтому я хочу взять текст, похожий на CSS, например:

var str = "selector {
  width: 100px;
  height: 20px;
}

.anything{
  margin: 5%;
}"; 

str.split(/regex goes here/);

Ожидаемый результат

[
  0 = selector{width: 100px; height: 20px;},
  1 = .anything{margin: 5%;}
]

Надеюсь, это не слишком запутанно, но, пожалуйста, спросите, если сомневаетесь.

Спасибо.

Answer 1

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

([\s\S]*?{[\s\S]+?})

Очень просто, но должно работать, пока в самих правилах нет символов {и} (что, я бы ожидал, было бы редкостью). Мое регулярное выражение игнорирует пробелы и переводы строк, пока CSS синтаксически допустим. Я использовал [\s\S] вместо ., потому что . не соответствует переводу строки.

В вашем случае для извлечения правил это будет:

var myCSS = "CSS goes here";
var rules = myCSS.match(/([\s\S]*?{[\s\S]+?})/);

EDIT:

Согласно запросу аскеров, я изменил свое регулярное выражение, чтобы игнорировать селектор, такой как: a {}. Тем не менее, он все равно поймает a { }. Я попытаюсь найти решение для этого, но в то же время вам может понадобиться обработать каждое правило и удалить пустые.

Answer 2

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

Попробуйте это:

var style = document.createElement('style');
style.innerHTML = ".test { color: red; } .test2 { }";
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
var style = document.styleSheets[document.styleSheets.length - 1];
style.disabled = true;
var rules = style.cssRules;
var list = [];
for (var i = 0; i < rules.length; i ++) {
  list.push(rules[i].cssText + "");
}
list;

Он запрашивает у анализатора CSS браузера работу за вас.

Из-за нерекурсивной природы синтаксиса CSS вы можете написать гигантское регулярное выражение для разбора CSS.