How to compare multiple possible regex values with given string

Question

I am new to javascript/jquery and I might not be aware of many functions that could help me with my problems as I have very elementary knowledge of javascript and jquery. And the project I am working on is just for practice.

So, I have a string which I want to compare with certain values, and three different values are possible which are mutually exhaustive.

$(".grid-item").click(function() {
    var classname = $(this).attr('class');
    console.log(classname);   //This returns "grid-item active car-right"

    var reg_class = /active checked booked/;

    var what_class = classname.match(reg_class);

    $(this).toggle_function(){

        if(what_class == active){

        }

        if(what_class == checked){

        }

        if(what_class == booked){

        }

    }
});

But this wouldn't work as the match function compares the reg_class variable's value whole as a string, and there nothing like that in the classname variable.

I looked upon this answer, "Compare one String with multiple values in one expression". But I couldn't get my problem solved there.

So, how do I create a regex variable with three distinct possible values and then compare it with the value I have in variable classname.

Isn't there any way to compare like this: (if classname == %active%)........This might seem ridiculous but, I don't know if this can be done in javascript or not.

score 1 · Accepted Answer · answered Mar 14 '19 at 07:08

I think a better solution in your case would be to use jQuery's .hasClass() which is dedicated to this:

$(function() {
  $('.grid-item').on('click', function (e) {
    if ($(this).hasClass('active')) {
      console.log('active');
    }
    if ($(this).hasClass('checked')) {
      console.log('checked');
    }
    if ($(this).hasClass('booked')) {
      console.log('booked');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-item checked booked somethingelse">click me</div>

score 0 · Answer 2 · answered Mar 14 '19 at 06:57

Alternate between the 3 different class options in the pattern, then extract the full string match from the pattern if there is such a match:

var match = classname.match(/active|checked|booked/);
var what_class = match ? match[0] : null;

Then you can check whether what_class === 'active' or whatever you want.

Mamun · Answer 3 · 2019-03-14T07:03:32.717

Try separating the words with |

var reg_class = /active|checked|booked/;

DEMO:

var classname = 'some_class active other_class';
var reg_class = /active|checked|booked/;
var what_class = classname.match(reg_class)[0];
console.log(what_class);

classname = 'some_class booked other_class';
what_class = classname.match(reg_class)[0];
console.log(what_class);

classname = 'some_class checked other_class';
what_class = classname.match(reg_class)[0];
console.log(what_class)

score 0 · Answer 4 · answered Mar 14 '19 at 07:07

$(".grid-item").click(function() {
    var classname = $(this).attr('class');
    var reg_class = /active|checked|booked/;
    var what_class = classname.match(reg_class)[0];
    console.log(what_class);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="grid-item active car-right">button 1</button>
<button class="grid-item checked car-right">button 2</button>
<button class="grid-item booked car-right">button 3</button>

score 0 · Answer 5 · answered Mar 14 '19 at 07:07

Your regular experession is wrong, this should work, if you modify it to your needs:

  var classname = 'grid-item active car-right';

  var reg_class = /(active|checked|booked)/;

  var what_class = classname.match(reg_class);

  if (what_class !== null && what_class.length) {
    if (what_class[1] === "active"){

    }

    if (what_class[1] === "checked"){

    }

    if (what_class[1] === "booked"){

    }
  }

Please, see more on Regular Expressions in JS

ALSO ... instead of many, many if's you could use a switch operator, which will be more readable at the end. In your scenario you could use it like this:

switch (what_class[1])
{
    case 'active':
    {
        // some code
        break;
    }
    case 'checked':
    {
        // some code
        break;
    }
    case 'booked':
    {
        // some code
        break;
    }
}

Hey thanks! Why does the value gets stored in array rather than in a variable. And that too two times, same value in that array. reg_class /(active|checked|booked)/ what_class active,active Why does this happen? — , Mar 14 '19 at 07:50
@SamarpitShrivastava Because, that's the result of the Regular Expression match function. The first value, is the entire matched sequence and the other ones are the matched groups, see https://www.w3schools.com/jsref/jsref_match.asp — CodiMech25, Mar 14 '19 at 08:37

How to compare multiple possible regex values with given string

5 Answers5