正则表达式匹配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

回答