JavaScript で CSS を効率的に解析するにはどうすればよいですか?

JavaScript での CSS の解析: 詳細ガイド

JavaScript での CSS の解析は、CSS コードからスタイルを抽出して操作する場合に便利なテクニックです。ただし、実装は複雑なタスクになる可能性があります。

JavaScript および jQuery ライブラリの使用

CSS の解析に使用できる専用の JavaScript ライブラリと jQuery ライブラリがあります。人気のあるライブラリの 1 つは [jQuery CSS](https://learn.jquery.com/using-jquery-core/other-topics/advanced-selectors/#css-manipulation) です。これは、CSS スタイルを抽出および変更するためのメソッドを提供します。

代替アプローチ

独自の CSS 解析を実装したい場合機能を使用すると、別の方法を使用してプロパティと値のペアを分割できます。たとえば、正規表現を使用して、特定のパターンに基づいて一致を取得できます。さらに、[PEG.js](https://pegjs.org/) や [JISON](https://zaach.github.io/jison/) などのパーサー ジェネレーターの使用を検討して、パーサー ベースのパーサーを自動的に生成することもできます。

セミコロンでの分割を避ける

プロパティ値の分割を避けるため値内のセミコロンでペアを指定すると、コロンの後にセミコロンを含む一致をスキップする正規表現を使用できます。例:

/(?:[^;|)]*:.*?;)|(?:[^;|)]*?;)|(?:[;|]{1})/g

この正規表現は、セミコロン以外の文字とそれに続くコロン、単独のセミコロン、または個々のセミコロンをキャプチャすることによって、プロパティと値のペアに一致します。

実装例

これは、前述の代替コードを使用した CSS 解析コードの改良された実装です。アプローチ:

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.match(/(?:[^;|)]*:.*?;)|(?:[^;|)]*?;)|(?:[;|]{1})/g);
    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 != "" &amp;&amp; value != "")
            rule[property] = value;
    }
    return rule;
},

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

ブラウザの CSSOM の使用

ブラウザの組み込み CSS オブジェクト モデル (CSSOM) を利用して CSS を解析することもできます。以下に例を示します:

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

   styleElement.textContent = styleContent;
    doc.body.appendChild(styleElement);

    return styleElement.sheet.cssRules;
};

以上がJavaScript で CSS を効率的に解析するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。