在JavaScript / jQuery中解析CSS

wwtsj6pe 于 2022-11-27 发布在 Java

关注(0)|答案(5)|浏览(147)

我尝试在JavaScript中实现CSS解析，以便：

a {
  color: red;
}

解析为对象：

{
  'a' {
    'color': 'red'
  }
}

首先，是否有JavaScript / jQuery库可以使用？
我的实现非常基本，所以我确信它无论如何都不是万无一失的。例如，它对基本CSS工作正常，但对以下类型的属性：

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

它失败了，因为我使用split(';')来分离property:value对。这里，;出现在value中，所以它也在那个点分离。
有没有其他方法可以做到这一点？
代码如下：

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[i].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[i].indexOf(':');
        var property = $.trim(declarations[i].substring(0, loc));
        var value = $.trim(declarations[i].substring(loc + 1));

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

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

谢谢你！

css

来源：https://stackoverflow.com/questions/3326494/parsing-css-in-javascript-jquery

5条答案

按热度按时间

unguejic1#

您可以轻松地使用浏览器自己的CSSOM来解析CSS：

var rulesForCssText = function (styleContent) {
    var doc = document.implementation.createHTMLDocument(""),
        styleElement = document.createElement("style");

   styleElement.textContent = styleContent;
    // the style will only be parsed once it is added to a document
    doc.body.appendChild(styleElement);

    return styleElement.sheet.cssRules;
};

对于每个返回的规则，您可以查看rule.style中的属性。有关示例，请参阅http://jsfiddle.net/v2JsZ/。

赞(0）回复(0）举报 2022-11-27

c2e8gylq2#

有一个用Javascript编写的CSS解析器JSCSSP

赞(0）回复(0）举报 2022-11-27

wlzqhblo3#

要编写最简单的解析器，请遵循规范中定义的标记化和CSS语法的确切规则。注意，您不必通过墨迹来实现规范。您可以从最有可能遇到的小部分和CSS开始，然后从那里扩展。更好的是，跳过整个过程，使用@Matthew的解决方案，除非这是一个学习练习。
JavaScript有各种各样的词法扫描器和解析器生成器。整个语法都可以在w3的网站上找到。当你可以简单地使用它和解析器生成器来生成JavaScript中的解析器时，为什么还要重复工作呢？

Jison
Peg.js
Cruiser.Parse
McLexer
JS/CC
CSS的生产规则如下所示。

stylesheet
  : [ CHARSET_SYM STRING ';' ]?
    [S|CDO|CDC]* [ import [ CDO S* | CDC S* ]* ]*
    [ [ ruleset | media | page ] [ CDO S* | CDC S* ]* ]*
  ;
import
  : IMPORT_SYM S*
    [STRING|URI] S* media_list? ';' S*
  ;
media
  : MEDIA_SYM S* media_list LBRACE S* ruleset* '}' S*
  ;
media_list
  : medium [ COMMA S* medium]*
  ;
medium
  : IDENT S*
  ;
page
  : PAGE_SYM S* pseudo_page?
    '{' S* declaration? [ ';' S* declaration? ]* '}' S*
  ;
pseudo_page
  : ':' IDENT S*
  ;
operator
  : '/' S* | ',' S*
  ;
combinator
  : '+' S*
  | '>' S*
  ;
unary_operator
  : '-' | '+'
  ;
property
  : IDENT S*
  ;
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration? [ ';' S* declaration? ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator? selector ]? ]?
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ]? ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*]? ')' ]
  ;
declaration
  : property ':' S* expr prio?
  ;
prio
  : IMPORTANT_SYM S*
  ;
expr
  : term [ operator? term ]*
  ;
term
  : unary_operator?
    [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
      TIME S* | FREQ S* ]
  | STRING S* | IDENT S* | URI S* | hexcolor | function
  ;
function
  : FUNCTION S* expr ')' S*
  ;
/*
 * There is a constraint on the color that it must
 * have either 3 or 6 hex-digits (i.e., [0-9a-fA-F])
 * after the "#"; e.g., "#000" is OK, but "#abcd" is not.
 */
hexcolor
  : HASH S*
  ;

赞(0）回复(0）举报 2022-11-27

mrphzbgm4#

简单的例子，没有测试，但应该工作，我在我的项目中使用类似的。

var div = jQuery('<div/>');
div[0].style = 'position:absolute;left:5px;top:10px;'; //Css to parse

div.css('left'); // => '5px'
div.css('top'); // => '10px'
div[0].style; // => Object containing all css

赞(0）回复(0）举报 2022-11-27

von4xj4u5#

这是阿特金斯的一个解析器，它严格遵循规范
https://github.com/tabatkins/parse-css
有一个pretty good video说明这个解析器与其他解析器的工作方式

赞(0）回复(0）举报 2022-11-27