正则表达式匹配CSS“:”
问题描述:
我已经从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
我只有到我提取括号内有什么意义:(?<={)(.*)(?=})
,有什么要我继续毫无头绪。
我该如何做到这一点?
在此先感谢!
答
你可以只拆分的;
document.getElementById(id).style.cssText.split(";")
编辑字符串:
注意到一个样式对象的cssText属性不包含选择
编辑2:
好的,我做了更多的挖掘,看起来你正在从CSSStyleRule对象获取你的cssText属性。这包括选择器。您可以通过多一点树遍历来获得实际规则的以分号分隔的列表。你可以得到的样式对象与
document.styleSheets[1].cssRules[0].style.cssText;
,而不是
document.styleSheets[1].cssRules[0].cssText;
见该深入:
答
这打破了这一切到名为项
\s*(?<rule>(?<selector>[^{}]+){(?<style>[^{};]+:[^{};]+;\s*)+})
如果您的解析器不支持命名的基团(其JavaScript不)从正则表达式中删除?<text>
,这样
\s*(([^{}]+){([^{};]+:[^{};]+;\s*)+})
由于您的cssText可能不包含css选择器,您可能只想分割;
。如果它不适合解析样式表,那么这种方法非常有效。我在写入内联样式表的工具中使用它。
答
我的正则表达式是有点生疏,但类似:
var arr = cssText.replace(/\s/g,'')
.replace(/^.*{([^}]+)}.*/,'$1')
.match(/([^;]+)/g);
应该创建:
["position:absolute","background-color:rgb(204,204,204)","max-width:150px"]
为什么不是字符串通过它拆分数组和循环? –
你是否知道cssText不包含选择器?所以你的例子是'cssText =“position:absolute; background-color:rgb(204,204,204); max-width:150px;”' –
你根本不需要regexp。使用CSS样式表DOM。 http://www.quirksmode.org/dom/tests/stylesheets.html –