CSS in JavaScript / jQuery analysieren ⇐ Jquery

[Guest]

Ich versuche, das Parsen von CSS in JavaScript so zu implementieren, dass:

Code: Select all

a {
color: red;
}
< /code>

wird in das Objekt analysiert: < /p>

{
'a' {
'color': 'red'
}
}
< /code>

Erstens gibt es ein JavaScript /jQuery  Bibliothek < /strong> Ich kann verwenden? < /p>

Meine Implementierung ist ziemlich einfach, daher bin ich sicher, dass sie keineswegs narrensicher ist. Zum Beispiel funktioniert es gut für Basic CSS, jedoch für eine Eigenschaft des Typs: < /p>

background: url(data:image/png;base64, ....);

Es schlägt fehl, weil ich split (';') zur separaten Eigenschaft: value Paare verwende. Hier tritt im Wert auf, also spaltet es sich auch an diesem Punkt auf.

Gibt es eine alternative Möglichkeit, dies zu tun?

Hier ist der Code: < /p>

parseCSS: function(css) {
var rules = {};
css = this.removeComments(css);
var blocks = css.split('}');
blocks.pop();
var len = blocks.length;
for (var i = 0; i < len; i++)
{
var pair = blocks.split('{');
rules[$.trim(pair[0])] = this.parseCSSBlock(pair[1]);
}
return rules;
},

parseCSSBlock: function(css) {
var rule = {};
var declarations = css.split(';');
declarations.pop();
var len = declarations.length;
for (var i = 0; i < len; i++)
{
var loc = declarations.indexOf(':');
var property = $.trim(declarations.substring(0, loc));
var value = $.trim(declarations.substring(loc + 1));

if (property != "" && value != "")
rule[property] = value;
}
return rule;
},

removeComments: function(css) {
return css.replace(/\/\*(\r|\n|.)*\*\//g,"");
}
< /code>

Danke! < /p>