CSS Filter Regex JS
I'm trying to determine if an filter
element's CSS attribute already contains some rules. But my regex never finds a match:/saturate\(.[^\)]\)/
Here's a demo for you guys:
var filter = $('div').css('filter');
$('p').eq(0).text(filter.search(/saturate\(.[^\)]\)/)); //Should return something else than -1
$('p').eq(1).text(filter.search(/contrast\(.[^\)]\)/)); //Should return -1
div{
filter: brightness(1.9) saturate(80%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<p></p>
<p></p>
source to share
You should use \([^)]+\)
instead \(.[^\)]\)
in your regular expressions:
var filter = $('div').css('filter');
$('p').eq(0).text(filter.search(/saturate\([^)]+\)/)); // 16
$('p').eq(1).text(filter.search(/contrast\([^)]+\)/)); // -1
div{
filter: brightness(1.9) saturate(80%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<p></p>
<p></p>
\(.[^\)]\)
matches (
, and then any char other than the line break char (c .
), then one char other than )
(your negative character class [^\)]
), and then a literal )
.
\([^)]+\)
will match
-
\(
- literal(
-
[^)]+
- 1 or more characters except)
-
\)
- letter)
.
source to share
You are missing +
in your regex
var filter = $('div').css('filter');
// V here!
$('p').eq(0).text(filter.search(/saturate\(.[^\)]+\)/)); //Should return something else than -1
$('p').eq(1).text(filter.search(/contrast\(.[^\)]+\)/)); //Should return -1
div{
filter: brightness(1.9) saturate(80%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<p></p>
<p></p>
source to share