Parsing CSS bằng JavaScript/jQuery

Question

Tôi đang cố gắng để thực hiện phân tích cú pháp của CSS bằng JavaScript để:

a { 
    color: red; 
} 

được phân tách thành các đối tượng:

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

Trước hết, là có một Javascript/jQuery thư viện Tôi có thể sử dụng?

Việc triển khai của tôi khá cơ bản, vì vậy tôi chắc chắn nó không phải là bằng chứng lừa đảo bằng bất kỳ phương tiện nào. Ví dụ, nó hoạt động tốt cho CSS cơ bản, nhưng đối với một tài sản của các loại:

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

Nó thất bại vì tôi đang sử dụng để tách split(';')property:value cặp. Ở đây, ; xảy ra trong các value, do đó, nó chia tách tại điểm đó quá.

Có cách nào khác để thực hiện việc này không?

Đây là mã:

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,""); 
} 

Cảm ơn!

Answer 1

Có một phân tích cú pháp CSS viết bằng javascript gọi JSCSSP

Answer 2

Để viết trình phân tích cú pháp chống lừa đảo nhất, hãy thực hiện theo các quy tắc chính xác cho tokenization và CSS grammar như được xác định trong thông số kỹ thuật. Lưu ý rằng bạn không phải triển khai thông số bằng mực. Bạn có thể bắt đầu với các phần nhỏ và CSS mà bạn rất có thể sẽ gặp phải, và sau đó mở rộng từ đó. Thậm chí tốt hơn, bỏ qua toàn bộ quá trình và đi với giải pháp @ Matthew trừ khi đây là một bài tập học tập.

Có nhiều trình quét từ vựng và trình tạo phân tích cú pháp khác nhau có sẵn cho JavaScript. Toàn bộ ngữ pháp có sẵn trên trang web của w3. Tại sao lại làm việc khi bạn có thể sử dụng đơn giản và trình tạo phân tích cú pháp để tạo trình phân tích cú pháp trong JavaScript.

1. Jison
2. Peg.js
3. Cruiser.Parse
4. McLexer
5. JS/CC

Các quy tắc sản xuất cho CSS được đưa ra dưới đây.

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* 
    ; 

Answer 3

Bạn có thể dễ dàng sử dụng CSSOM riêng của Trình duyệt để phân tích 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; 
}; 

Đối với mỗi quy tắc trở lại, bạn có thể nhìn vào các thuộc tính trong rule.style. Xem http://jsfiddle.net/v2JsZ/ để biết ví dụ.