JavaScript regex aide

Question

Je dois utiliser JavaScript partagé mais je suis inutile à regex donc ce que je veux faire est de prendre un texte qui est comme la structure CSS par exemple:

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

.anything{ 
    margin: 5%; 
}"; 

str.split(/regex goes here/); 

Sortie prévue

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

J'espère que ce n'est pas trop confus mais s'il vous plaît demander si vous avez un doute.

Merci.

Answer 1

Je n'utiliserais pas un split pour cela. Au lieu de cela, utiliser regex pour extraire chaque règle:

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

Très simple, mais devrait fonctionner aussi longtemps que il n'y a pas {et} caractères dans les règles elles-mêmes (que j'attendais serait rare). Mon regex ignore les espaces et les retours à la ligne tant que le CSS est syntaxiquement valide. J'ai utilisé [\s\S] à la place de . parce que . ne correspond pas aux nouvelles lignes.

Dans votre cas, pour extraire les règles qu'il serait:

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

EDIT:

Conformément à la demande de askers, je l'ai modifié mon regex d'ignorer un sélecteur tel que: a {} . Cependant, il sera toujours attraper a { }. Je vais essayer de trouver une solution pour cela, mais en attendant, il se peut que vous deviez traiter chaque règle et supprimer les règles vides.

Answer 2

Les expressions rationnelles ne sont pas destinées à l'analyse. Vous devriez écrire ou trouver un analyseur CSS pour faire le travail, mais cela pourrait allonger votre code.

Essayez ceci:

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; 

Il demande l'analyseur CSS du navigateur pour faire le travail pour vous. En raison de la nature non récursive de la syntaxe CSS, vous pouvez écrire une expression rationnelle géante pour analyser CSS.