到CSS規則添加前綴使用javascript

我有下面的CSS，我需要用JavaScript到CSS規則添加前綴使用javascript

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

處理字符串我怎樣才能前綴.page添加到每個規則，以便在CSS不破？

我想這個結果

.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。有沒有一個好的解析器，否則這可以實現嗎？

來源

2015-10-20 Adrian Rosca

您需要解析它！ –

這個討論在這種情況下可能會有所幫助： http://stackoverflow.com/questions/8302437/how-to-parse-and-extract-css-selectors-as-strings – CmajSmith

您應該看看返工工具套件（https://github.com/reworkcss/rework）。它解析和轉換，並可以處理字符串。試圖用正則表達式解析語言是一個糟糕的主意，這是相當完善的。正如你發現的那樣，你會想出一些你認爲可行的解決方案，然後在那之後你會發現一個你的「解決方案」破裂的案例。 – 2015-10-20 13:02:35

看看正則表達式

例如是這樣的：

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

應該捕捉你的CSS串在第一組和第二組中的所有選擇器和規則。然後你做這樣的事情來代替比賽

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-20 11:59:13 CrowbarKZ

這適用於我所有情況下的魅力 –

這會在CSS上失敗，例如''html，body {foo：bar; content：'}';} div {color：red}「'。它也會失敗，例如'。\ {boo \} {color：red; }'。當然，這些都是人爲的例子，但他們仍然認爲你不能可靠地用正則表達式解析CSS。 – 2015-10-20 13:09:50

對於這些情況，我想你可以修改一個RegExp來解釋逃逸/引用大括號 – CrowbarKZ

如果你會使用sass你可以簡單地寫類似

.page { 
    h1 { 
    color: red; 
    } 

    h2 { 
    color: green; 
    } 
}

這將被編譯到你想要什麼。但如果這不是一個選項，你必須編寫你自己的解析器。

來源

2015-10-20 11:24:16 mstruebing

我意識到這一點，但我不能。我需要用JavaScript處理一個CSS字符串。 –

假設u有strCss爲字符串

東西像這樣會工作

strCss = strCss.replace(/,/g, ', .page').replace(/}/g, '} .page'); 
strCss = strCss.substring(0, strCss.lastIndexOf('.page')); 
strCss = '.page ' + strCss;

來源

2015-10-20 12:01:10

一個解決方案，它循環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-20 12:50:23 Anonymous0day