JavaScript регулярные выражения помогают

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.