5

JavaScriptで処理する必要がある次のcssを含む文字列があります

h1
{
    color: red;
}

.info
{
    border: 1px dotted blue;
    padding: 10px;
}

#rect
{
    background: pink;
}

h2,
h3,
h4
{
    font-weight: bold;
}

table td:last td
{
    background: gainsboro;
}

.pagecss が壊れないように各ルールにプレフィックスを追加するにはどうすればよいですか?

この結果が欲しい

.page h1
{
    color: red;
}

.page .info
{
    border: 1px dotted blue;
    padding: 10px;
}

...

現在、インデントを探して解決していますが、この場合、コードは失敗します

h1
{
color: red;
}

で終わる

.page h1
{
.page color: red;
}

ブラケットのみを含む行を探すこともできますが、この場合は失敗します

h1 { color: red; }

私は独自のcssパーサーを構築したくありません。私が見つけたものは、ほとんどがDOM内の要素に適用されたcssを処理し、cssを使用した文字列ではありません。良いパーサーはありますか、それとも別の方法で実現できますか?

4

5 に答える 5

1

実際の問題の解決策であると思われることをどのように行うかという質問を提起しました。これは、ドキュメントの 1 つのセクションにのみ CSS を適用するにはどうすればよいですか?

最終的に、解決策は になります<style scoped>。それを待っている間、 https://github.com/PM5544/scoped-polyfill、http://thomaspark.co/2015/07/polyfill-for-scoped-css/などのポリフィルを試すことができます。https://github.com/thingsinjars/jQuery-Scoped-CSS-pluginまたはhttps://github.com/thomaspark/scoper。

CSS の文字列 (どこから取得したものですか?) がある場合、これらのポリフィルを使用するには、文字列に取得した CSS を含む要素を<style scoped>DOM の要素の下に挿入するだけです。.page

これらのポリフィルはすべて、ブラウザによって正しく解析された CSS に基づいているという大きな利点があり、問題の最初の兆候で壊れることはありません。

于 2015-10-20T13:21:52.103 に答える
0

解決策の 1 つは、CSS ルールをループしてその場で更新することです。

/* debug purpose */
var j = JSON.stringify;
var el = document.getElementById('el');
var log = function( val ){el.innerHTML+='<div>'+val+'</div>'}

var doIt = function(){

// you have to identify your stylesheet to get it
var ss = document.styleSheets[0];
// we get all the rules from this stylesheets
var rules = ss.cssRules;

// we loop over all rules
for( var i = 0 ; i < rules.length; i++){
  var rule = rules[i];
  
  var selector = rule.selectorText;
  var def = rule.cssText.replace(selector , '');
  
  // we update the selector
  var selector2 = selector.replace(/([^,]+,?)/g , '.page $1 ' ); 

  // we modify the rules on the fly !
  var def2 = def.replace('red' , 'green');
  def2 = def2.replace('blue' , 'red');
  def2 = def2.replace('pink' , 'lime');
  
  log(i);
  log( 'def : ' + def);
  log( 'modified : ' + def2);
  log( 'selector : ' + selector);
  log( 'updated : ' + selector2);
  log('----------');
  ss.deleteRule(i);// we remove the old 
  ss.insertRule(selector2 + def2 , i);// we add the new 
  
};

  
  // we check the stylecheet !
  log( ' checking the results');
  for( var i = 0 ; i < rules.length; i++){
  var rule = rules[i];
  
  var curRule = rule.cssText;
  log( i + ':  curRule => ' + curRule);
 
};
  
};
h1
{
    color: red;
}

.info
{
    border: 1px dotted blue;
    padding: 10px;
}

#rect
{
    background: pink;
}

h2,
h3,
h4
{
    font-weight: bold;
}

table td:last td
{
    background: gainsboro;
}
<div class='page'>
  <div id='rect'> RECT </div>
  <div class='info'> INFO </div>
<div>
<button onclick='doIt()'>update it</button>
<div id='el'><div>

于 2015-10-20T12:50:23.833 に答える
-1

正規表現を見てみよう

たとえば、次のようなものです。

/([^]*?)({[^]*?}|,)/g

css 文字列のすべてのセレクターを最初のグループに、ルールを 2 番目のグループにキャプチャーする必要があります。そして、あなたはこのようなことをしてマッチを置き換えます

var str = "your css text here";
re = /([^]*?)({[^]*?}|,)/g;
var new_str = str.replace(re, ".prefix $1 $2"); //prefixed css
console.log(new_str);

正規表現に慣れていない場合は、Eloquent Javascriptの関連する章を読むことをお勧めします

于 2015-10-20T11:59:13.687 に答える