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

JavaScript / jQuery での CSS の解析

CSS の解析にライブラリを利用できますか?

CSS を効率的に解析するにはJavaScript の場合は、独自の解析ロジックを構築するのではなく、ライブラリの利用を検討してください。たとえば、jQuery の「parseCSS」や「cssParser」などのライブラリを使用して、解析プロセスを簡素化できます。

スタイルを分割するための代替方法

複雑な CSS プロパティが発生した場合「background: url(data:image/png;base64, ....);」のように、現在の「;」を使用して分割するアプローチ信頼できなくなります。これを解決するには、正規表現 (RegEx) を使用してプロパティと値のペアを分離します。

var regEx = /([^:]+):([^;]+);?/g;

この RegEx は、コロンで区切られ、その後にオプションのセミコロンが続くプロパティと値のペアをキャプチャします。

サンプル JavaScript コード

以下は、 CSS パーサー:

function parseCSS(css) {
  css = removeComments(css);
  var rules = {};
  css.replace(/([^:]+):([^;]+);?/g, function(m, prop, val) {
    rules[prop.trim()] = val.trim();
  });
  return rules;
}

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

解析に CSSOM を利用する

CSS を解析するもう 1 つの非常に効率的な方法には、ブラウザーの組み込み CSSOM を利用する方法があります:

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

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

  return styleElement.sheet.cssRules;
}

このアプローチでは、ブラウザーの CSS 解析機能を利用してコレクションを抽出しますCSSRule オブジェクトのグループ。それぞれが CSS ルールに対応し、さらに検査して詳細情報を取得できます。

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