CSS Filter Regex JS

Question

I'm trying to detect if the CSS attribute filter of an element already contains some rules. But my regex never finds any 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>

Use \([^)]+\) instead of \(.[^\)]\)

Wiktor Stribiżew
– Wiktor Stribiżew

2017-08-03 14:39:56 +00:00
Commented Aug 3, 2017 at 14:39 — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Aug 3, 2017 at 14:39

c2huc2hu · Accepted Answer · 2017-08-03 14:39:51Z

4

You're missing a + 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>

answered Aug 3, 2017 at 14:39

c2huc2hu

2,49720 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wiktor Stribiżew · Accepted Answer · 2017-08-03 14:49:51Z

1

You should use \([^)]+\) instead of \(.[^\)]\) in your regexps:

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>

The \(.[^\)]\) matches (, then any char other than a line break char (with .), and then a single char other than ) (your negated character class [^\)]), and then a literal ).

The \([^)]+\) will match

\( - a literal (
[^)]+ - 1 or more chars other than )
\) - a literal ).

answered Aug 3, 2017 at 14:49

Wiktor Stribiżew

631k41 gold badges502 silver badges633 bronze badges

3 Comments

Zenoo Over a year ago

Oh, you don't have to escape the ) inside the [] ?

Wiktor Stribiżew Over a year ago

@Zenoo: No, no need escaping ( and ). Only ^, \, ] and - require escaping (though in some cases, ^, and - may be used as literals inside character classes, too).

Zenoo Over a year ago

Thanks, I didn't know that !

Collectives™ on Stack Overflow

CSS Filter Regex JS

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related