0

さて、ここで私がやろうとしていることです。次のようなCSSルールを含む配列を変換したい:

[

".divd { bottom: 0px; height: 500px; }"

, 

".divk { font-size: 14px; }"

]

これを次のように変えたい:

cssarray['divd'] =  {
        bottom: "0px",
        height: "500px",
    };

これが私がこれまでに行ったことです：

    var splitSelector= css.split("{");
    var splitProperty = split[1].split(";");
    var v =[];
    for(i in splitProperty ){
        v = $.extend(v,splitProperty[i].split(":"));
    }

私は多くの分割ステートメントでこの仕事をしようとしましたが、運が悪いです。

4

6 に答える 6

4

このフィドルを参照してください：http://jsfiddle.net/YrQ7B/3/

    var arr = [".divd { bottom: 0px; height: 500px; }", 
"#divk { font-size: 14px; }"];

var output = {};
for(var k in arr)
{
    var value = arr[k], key;
    // Get key
    value.replace(/(\.|#)([a-z\s]+){/gi, function($1, $2, $3){
          key = $3;
    });
    // Make object
    output[key] = {};

    // Replace First part
    value = value.replace(/\.([a-z\s]+) {/gi, "");
    value = value.replace("}", "");

    value.replace(/([a-z\-]+)([^:]+)?:([^0-9a-z]+)?([^;]+)/g, function($1, $2, $3, $4, $5){             
        output[key][$2] = $5;
    });
}

console.log(output);
​
​

ログ:

Object
    divd: Object
        bottom: "0px"
        height: "500px"
    divk: Object
        font-size: "14px"
于 2012-10-13T12:09:12.890 に答える
2

残念ながら、CSS トークンの解析は、文字列を分割するほど簡単ではありません。実際、理想的にはパーサーが必要です。タスクには既存の CSS パーサーを使用することをお勧めします。

于 2012-10-13T12:12:38.207 に答える
1

私は過去にこれを使用しましたが、正規表現に何を送信するかを正確に知っている場合にのみ、それを壊す可能性のある構文があると確信しているためです（特にミックスイン、cssアニメーションなど） 、css変数、およびメディアクエリ）。これらの理由から、おそらくマリオの答えに従う必要があります。

しかし、それは私が投げた自分のcssファイルの大部分で機能し、他の人を助けるかもしれません...あなたが使用しているような配列構造で動作するように調整されていませんが、それは可能性があります簡単に変更できます。RegExp明らかに、shhacのように削除して使用することで最適化できますがindexOf、RegExpの表現力は、必要に応じて、操作がはるかに簡単で、拡張もはるかに簡単です。

いくつかのメモ

  1. CSSにコメントがないことを前提としています。コメントを削除するには、いつでも置換を追加できます。
  2. 利用可能なJSON.parseメソッドに依存しています-JSON以外のフォールバックをいつでも含めることができます。

コメント付きのコード：

window.onload = function(){
  /// this is designed to find a <style> element in the page with id="css"
  var entireStylesheetString = document.getElementById('css').innerHTML;
  var css = String('{'+entireStylesheetString+'}')
    /// convert double quotes to single to avoid having to escape
    .replace(/"/gi,"'")
    /// replace all whitespace sequences with single space
    .replace(/\s+/g,' ')
    /// sort the first open brace so things are neat
    .replace(/^{/,'{\n')
    /// sort the newlines so each declaration is on own line
    .replace(/\}/g,'}\n')
    /// find the selectors and wrap them with quotes for JSON keys
    .replace(/\n\s*([^\{]+)\s+?\{/g,'\n"$1":{')
    /// find an attribute and wrap again with JSON key quotes
    .replace(/([\{;])\s*([^:"\s]+)\s*:/g,'$1"$2":')
    /// find values and wrap with JSON value quotes
    .replace(/":\s*([^\}\{;]+)\s*(;|(\}))/g,'":"$1",$3')
    /// add commas after each JSON object
    .replace(/\}/g,'},')
    /// make sure we don't have too many commas
    .replace(/,\s*\}/g,'}');
  /// remove the final end comma
  css = css.substring(0,css.length-2);
  try{
    /// parse using JSON
    console.log(JSON.parse(css));
  }catch(ee){
    console.log(ee);
  }
};

それによるコードは寂しいです：

window.onload = function(){
  var entireStylesheetString = document.getElementById('css').innerHTML;
  var css = String('{'+entireStylesheetString+'}')
    .replace(/"/gi,"'")
    .replace(/\s+/g,' ')
    .replace(/^{/,'{\n')
    .replace(/\}/g,'}\n')
    .replace(/\n\s*([^\{]+)\s+?\{/g,'\n"$1":{')
    .replace(/([\{;])\s*([^:"\s]+)\s*:/g,'$1"$2":')
    .replace(/":\s*([^\}\{;]+)\s*(;|(\}))/g,'":"$1",$3')
    .replace(/\}/g,'},')
    .replace(/,\s*\}/g,'}');
  css = css.substring(0,css.length-2);
  try{console.log(JSON.parse(css));}catch(ee){console.log(ee);}
};
于 2012-10-13T13:59:08.353 に答える
1

非正規表現メソッド

var cssObj = {},
    arr = [".divd { bottom: 0px; height: 500px; }", ".divk { font-size: 14px; }"],
    arr_i = arr.length,
    i, j, k, str,
    sel, vals, val;
while(arr_i-- > 0){       // loop over array
    str = arr[arr_i];
    i = str.indexOf('{');
    sel = str.slice(0,i); // get Selector
    vals = str.slice(i+1,str.lastIndexOf('}'));           // get values
    val = vals.slice(0,vals.lastIndexOf(';')).split(';'); // and put in array
    cssObj[sel] = {};
    k = val.length;
    while(k-- > 0){
        j = val[k].indexOf(':');                      // get name-value pair
        cssObj[sel][val[k].slice(0,j).trim()] = val[k].slice(j+1).trim();
    }
}
console.log(cssObj); // see output

関数として使用するには、 を渡しarrて に変更console.logしreturnます。は、の.slice(0,vals.lastIndexOf(';'))前の最後のエントリ}がセミコロンで終わっていることを前提としています。これを想定したくない場合は、それを取り出して、最後の配列項目が空白/空白ではないことを確認してください。

jsperf と RegExp メソッド

于 2012-10-13T12:19:13.557 に答える
0

私は eval の支持者ではありませんが、変換する場合

. に ["

"]= への最初のスペース

： に ："

; に "、

次に、評価がすべてを設定します

于 2012-10-13T12:10:06.600 に答える
0

スタイルタグを追加するだけでよい場合があります。

var data=[".divd { bottom: 0px; height: 500px; }", 
".divk { font-size: 14px; }"
]

var $style=$('<style>');

$.each( data, function(i, item){
  $style.append( item + ';');
})

$('head').append($style)
于 2012-10-13T14:49:30.813 に答える