使用javascript分析style.filter字符串
Parsing the style.filter string using javascript
我正在尝试获取DOM元素的一些过滤器属性,如不透明度、模糊等。目前我正在拆分字符串,然后尝试使用regex将字符串标记与已知的过滤器类型进行匹配。我的问题:
我在下面的正则表达式中遇到了逻辑OR的问题——例如,我试图匹配"opacity(0.234)或opacity)(1)"。
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
我搞砸了什么?(在大多数测试中,它都返回false,而应该是true)
是否有更好的方法(即使用对象表示法或类似方法访问过滤器字符串的各个组成部分)?解析字符串以获取属性是痛苦的。
您忘记在任何地方都加倍'
。此外,没有必要过度使用捕获组,我建议删除它们并用非捕获组替换,以免对匹配对象进行聚类。
以下是我建议的更改:
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="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
console.log(reg);
//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
为了参考其他希望做同样事情的人,这里有一个代码模板。我仍然在寻找一种更优雅的方式来直接访问参数的值,因为这很难看。
//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(')','');
}
}
}
}
相关文章:
- 如何在JavaScript中将字符串转换为函数引用
- jQuery中是否内置了任何字符串格式化函数
- Javascript,有没有一种方法可以将数组写成没有逗号或空格的单个文本字符串
- ng打开空字符串
- 正则表达式在字符串中找到base64
- 如何将字符串值从php页面发送到java脚本页面
- 子字符串/正则表达式以获取字符串中保存的 SRC 值
- 字符串在将其传递给另一个活动Android JavaScript时读取Null
- 对id以某个字符串开头的元素进行计数
- Javascript逻辑运算符和字符串/数字
- 反向字符串比较
- 如何在数组上使用 .filter() 只删除“NaN”而不删除字符串和数字
- 大括号和过滤器 - filter 返回对象,但它在 {{ }} 中转换为字符串
- JS将OData$filter字符串解析为Object Structure
- 使用javascript分析style.filter字符串
- 如何使用JQuery'在这种情况下,s.filter()选择包含不区分大小写的字符串的元素
- 这个字符串拆分操作中的“filter”调用是什么
- Ng-repeat filter从object - angularjs否定字符串
- Filter string只过滤不带空格的字符串
- SAPUI5 Filter只适用于字符串