我想parce一个CSS文件,每一个CSS选择器之前添加另一个选择。
从:
p{margin:0 0 10px;}
.lead{margin-bottom:20px;font-size:21px;font-weight:200;line-height:30px;}
我想要:
.mySelector p{margin:0 0 10px;}
.mySelector .lead{margin-bottom:20px;font-size:21px;font-weight:200;line-height:30px;}
但我的CSS文件是非常复杂的(实际上它是引导css文件),因此正则表达式应该匹配所有的CSS选择器。
现在我有这样的正则表达式:
([^\r\n,{};]+)(,|{)
你可以在这里看到的结果http://regexr.com?328ps但你可以看到有很多不应该匹配匹配
例如:
text-shadow:0 -1px 0 rgba(0,
配衬积极的,但它不应该
是否有人有办法解决吗?
谢谢
Answer 1:
没有一个。 CSS选择器是不是“的一个例子正则语言 ”,因此不能用正则表达式解析。 您将需要根据CSS语法规范来构建自己的解析器: http://www.w3.org/TR/css3-syntax/#detailed-grammar
CSS被描述为LL(1)语法,所以你可能会更好过使用类似的Yacc工具来生成你为你解析。
Answer 2:
所以,我终于发现,我的要求工作的正则表达式
([^\r\n,{}]+)(,(?=[^}]*{)|\s*{)
关键的一点是添加一个积极的前瞻 ,以避免不良的匹配
(?=[^}]*{)
:你可以在这里看到的结果http://regexr.com?328s7
唯一的预防措施,我可以建议是取消每块注释:
坏样本与块注释: http://regexr.com?328sd
Answer 3:
所以最后我已经找到一种方法更好的方式来做到这一点。
我用一个不太编辑器(如: http://lesstester.com/ )
并简单地窝我的整个CSS文件:.mySelector {你在这里的CSS}
Answer 4:
这是真的,你不能使用正则表达式选择CSS 选择器 ,但你可以使用正则表达式选择CSS 规则 ,所以你可以在倒数方式来完成工作:
为了格式的CSS文件不具有在同一行选择器和规则。 你的代码应该是这样的:p {
余量:0 0 10px的;
}
。铅{
边距:20像素;
字体大小:21px;
字体重量:200;
行高:30像素;
}
选择所有规则(正则表达式:(^()*)。p {
余量:0 0 10px的;
}
。铅{
边距:20像素; 字体大小:21px; 字体重量:200; 行高:30像素;
}
添加一些前缀规则(例如####)p {
####余量:0 0 10px的;
}
。铅{
####边距:20像素; ####字体大小:21px; ####字体重量:200; ####行高:30像素;
}
选择所有行不与####开始,而不是返回到线,而不是一个}(正则表达式:^ [^ #### \ N}])p {
####余量:0 0 10px的;
}
。铅{
####边距:20像素;
####字体大小:21px;
####字体重量:200;
####行高:30像素;
}
加你的CSS前缀.my_class_prefix p {
####余量:0 0 10px的;
}
.my_class_prefix .lead {
####边距:20像素;
####字体大小:21px;
####字体重量:200;
####行高:30像素;
}
删除添加前缀####.my_class_prefix p {
余量:0 0 10px的;
}
.my_class_prefix .lead {
边距:20像素;
字体大小:21px;
字体重量:200;
行高:30像素;
}
Answer 5:
一个简单的和可读的正则表达式是如下:
[\#\.\w\-\,\s\n\r\t:]+(?=\s*\{)
你可以在这个测试它的CSS代码工具 `
Answer 6:
下面是我用一个类似的问题的解决方案。 我想删除与发表的所有CSS规则@ 。 为此,我用下面的正则表达式:
@\s*.*\s*\{((?!\n\})[\s\S])+\n\}
它使该规则在新的一行结束的假设。 这样,它可以排序的处理嵌套CSS规则。
Answer 7:
面临着类似的问题,用以下只提取CSS选择器和指令不评论和媒体查询:
/^(?!.*@media)[\t ]*([a-zA-Z#.:*\[][^{\/]*\s*){[\s\S]*?}/
例如: https://regex101.com/r/JmjthP/5
我敢肯定,这是缺少一些边缘情况,但似乎是为我工作。
看到这个问题: Ruby的正则表达式-匹配所有的CSS选择器和指令
Answer 8:
虽然它不是可以编写任何有效的CSS选择器匹配一个正则表达式,你可以结合一对夫妇正则表达式和有点逻辑来实现你的目标。
下面以节点的fs模块读取CSS,但你可以得到,但是你想的原始CSS串。
const fs = require('fs'),
myClassName = 'mySelector',
mySelector = '.' + myClassName,
mySelectorRegex = new RegExp(`\\.${myClassName}([ .#[:(]|$)`),
cssSelectorRegex = /[@.#a-zA-Z][^}]*?(?={)/g;
let css = fs.readFileSync('path/to/file.css').toString();
css = css.replace(cssSelectorRegex, match => {
// Match is a string of selectors like '.foo' or '.foo, #bar'
// We need to split it on the comma and handle each selector individually
return match.split(',').map(selector => {
selector = selector.trim();
// Don't alter media queries, imports, or selectors that already contain '.mySelector'
if (selector.startsWith('@') || selector.match(mySelectorRegex)) {
return selector;
}
// Prepend '.mySelector ' to the selector
return mySelector + ' ' + selector;
// Combine the list of selectors back together
}).join(',');
});
文章来源: What is the REGEX of a CSS selector