正則表達式匹配CSS「<property>：<value>」

我已經從document.styleSheets中檢索了一條CSS規則，現在正在尋找提取它的屬性和值。正則表達式匹配CSS「<property>：<value>」

cssText = ".expl { position: absolute; background-color: rgb(204, 204, 204); max-width: 150px; }";

是否有可能使用正則表達式檢索匹配內的屬性及其相應的值？另外，去掉尾隨的分號。

我想要得到的結果如下：

position: absolute // match 1 
background-color: rgb(204, 204, 204) // match 2 
max-width: 150px // match 3

我只有到我提取括號內有什麼意義：(?<={)(.*)(?=})，有什麼要我繼續毫無頭緒。

我該如何做到這一點？

在此先感謝！

2011-10-06 jolt

爲什麼不是字符串通過它拆分數組和循環？ –

你是否知道cssText不包含選擇器？所以你的例子是'cssText =「position：absolute; background-color：rgb（204,204,204）; max-width：150px;」' –

你根本不需要regexp。使用CSS樣式表DOM。 http://www.quirksmode.org/dom/tests/stylesheets.html –

你可以只拆分的;

document.getElementById(id).style.cssText.split(";")

編輯字符串：

注意到一個樣式對象的cssText屬性不包含選擇

enter image description here

編輯2：

好的，我做了更多的挖掘，看起來你正在從CSSStyleRule對象獲取你的cssText屬性。這包括選擇器。您可以通過多一點樹遍歷來獲得實際規則的以分號分隔的列表。你可以得到的樣式對象與

document.styleSheets[1].cssRules[0].style.cssText;

，而不是

document.styleSheets[1].cssRules[0].cssText;

見該深入：

enter image description here

2011-10-06 19:13:25

顯然有人正在經歷和只是downvoting在這個線程中的一切。 – Cfreak

哦，我想應該再下降一次，嘿..因爲你先回答，再加上努力 - 答案就交給你了。謝謝！ – jolt

@不客氣。：）樂意效勞。 –

拉一切就括號之間，然後只把它分解出來：

matches = cssrule.match(/{([^}]+)}/; 
rules = matches[1].split(';');

2011-10-06 19:14:28 Cfreak

哦！我明白你爲什麼這樣做了......我認爲OP會誤解。 cssText屬性不包含選擇器。 –

@Joseph，它在通過'cssRules'收集時在Chrome上檢索選擇器。也許'規則'行爲不同。 – jolt

cssText恰好是他的變量名稱。我認爲這是令人困惑的問題。這不是cssText屬性。 – Cfreak

這打破了這一切到名爲項

\s*(?<rule>(?<selector>[^{}]+){(?<style>[^{};]+:[^{};]+;\s*)+})

如果您的解析器不支持命名的基團（其JavaScript不）從正則表達式中刪除?<text>，這樣

\s*(([^{}]+){([^{};]+:[^{};]+;\s*)+})

由於您的cssText可能不包含css選擇器，您可能只想分割;。如果它不適合解析樣式表，那麼這種方法非常有效。我在寫入內聯樣式表的工具中使用它。

2011-10-06 19:23:22 CaffGeek

我的正則表達式是有點生疏，但類似：

var arr = cssText.replace(/\s/g,'') 
       .replace(/^.*{([^}]+)}.*/,'$1') 
       .match(/([^;]+)/g);

應該創建：

["position:absolute","background-color:rgb(204,204,204)","max-width:150px"]

2011-10-06 19:35:56 David

回答