使用javascript解析style.filter字符串
我正在尝试获取DOM元素的一些过滤器属性,例如不透明度、模糊等。此时,我正在拆分字符串,然后尝试使用正则表达式将字符串标记与已知过滤器类型相匹配。我的问题: 我在下面的正则表达式中遇到了逻辑OR的问题-例如,我试图匹配“不透明度(0.234)或不透明度(1)”使用javascript解析style.filter字符串,javascript,regex,css,Javascript,Regex,Css,我正在尝试获取DOM元素的一些过滤器属性,例如不透明度、模糊等。此时,我正在拆分字符串,然后尝试使用正则表达式将字符串标记与已知过滤器类型相匹配。我的问题: 我在下面的正则表达式中遇到了逻辑OR的问题-例如,我试图匹配“不透明度(0.234)或不透明度(1)” var re1="(opacity)"; // word "opacity" var re2="(\\()"; // single character '(' var re3 = "(0(\.\d+)?)" //0, with
var re1="(opacity)"; // word "opacity"
var re2="(\\()"; // single character '('
var re3 = "(0(\.\d+)?)" //0, with possible decimals after
var re4 = "(1)" //single character '1'
var re3or4 = "("+re3+"|"+re4+")"; //logical or
var re5 = "(\\))"; //single character ')'
var reg = new RegExp(re1+re2+re3or4+re5, "i");
//unit tests
console.log(reg.test("opacity(0)")); //true
console.log(reg.test("opacity(0.4)")); //true
console.log(reg.test("opacity(1)")); //true
console.log(reg.test("opacity()")); //false
console.log(reg.test("opacity")); //false
你忘了在任何地方加倍
\
。另外,过度使用捕获组也没有意义,我建议删除它们并替换为非捕获组,以避免对匹配对象进行集群
以下是我的建议:
var re1="opacity"; // word "opacity"
var re2="\\("; // single character '('
var re3 = "0(?:\\.\\d+)?" //0, with possible decimals after
// ^^ ^^
var re4 = "1" //single character '1'
var re3or4 = "("+re3+"|"+re4+")"; //logical or
var re5 = "\\)"; //single character ')'
var reg = new RegExp(re1+re2+re3or4+re5, "i"); // => /opacity\((0(?:\.\d+)?|1)\)/i
var re1=“不透明度”//“不透明”一词
var re2=“\\(”;//单个字符'('
var re3=“0(?:\.\\d+)”//0,后面可能有小数
var re4=“1”//单个字符“1”
var re3or4=“(“+re3+”|“+re4+”)”;//逻辑或
var re5=“\\)”;//单个字符“')”
var reg=new RegExp(re1+re2+RE3或4+re5,“i”);//=>/不透明度\((0(?:\.\d+)?\1)\)/i
控制台日志(reg);
//单元测试
控制台日志(注册测试(“不透明度(0)”)//真的
控制台日志(注册测试(“不透明度(0.4)”)//真的
控制台日志(注册测试(“不透明度(1)”)//真的
log(reg.test(“opacity()”))//假的
控制台日志(注册测试(“不透明度”)//false
对于希望做同样事情的其他人,这里有一个代码模板。我仍然在寻找一种更优雅的方法来直接访问参数的值,因为这很难看
//example properties with default values
var properties = {
"sepia": 0,
"saturate": 1,
"opacity": 1
//add your own...
}
//set up the regex
var re2 = "\\("; // single character '('
var re3 = ".*"; //match any character multiple times
var re5 = "\\)"; //single character ')'
//parse the values
var el = document.getElementById("blah");
var filterStrings = el.style.filter.split(" "); //generate array of filter property strings
for(var p in properties){
if(properties.hasOwnProperty(p)){
//loop through all the filter strings and see if we have a match with current property p
for(var i = 0; i < filterStrings.length; i++){
//construct regular expression based on current property p
var reg = new RegExp(p+re2+re3+re5, "i");
if(reg.test(filterStrings[i])){
//if we have a match, strip the filter name and save the value
properties[p] = filterStrings[i].replace(p,'').replace('(','').replace(')','');
}
}
}
}
//具有默认值的示例属性
变量属性={
“乌贼墨”:0,
“饱和”:1,
“不透明度”:1
//添加你自己的。。。
}
//设置正则表达式
var re2=“\\(”;//单个字符'('
var re3=“*”//多次匹配任何字符
var re5=“\\)”;//单个字符“')”
//解析值
var el=document.getElementById(“blah”);
var filterStrings=el.style.filter.split(“”)//生成筛选器属性字符串的数组
对于(属性中的var p){
if(properties.hasOwnProperty(p)){
//循环遍历所有筛选器字符串,查看是否与当前属性p匹配
对于(变量i=0;i
谢谢你的回答!你建议用这种方式提取css过滤器值,还是有更好更合适的方法呢?我不是css过滤器方面的专家,但是如果是纯文本,没有嵌套结构,您可以使用regex提取您需要的任何内容。我决定接受这个答案,因为似乎没有其他人有直接访问各种过滤器参数的建议。