javascript switch statement, if string contains substring

Question

I'm trying to figure out how to do a switch statement where I need to find a class name of the object, then do something depending on the class name (in the switch statement).

In this example, I need the switch statement to do whatever I need when the class contains a specific word, such as "person".

html

<div class="person temp something"></div>

javascript

$(document).on('mousedown', function(e) {
    var clicked = $(e.target).attr('class');
    console.log(clicked);
    switch (clicked) {
        case "person":
            //do something
            break;
        default:    
            //do something  
    }
});

It's not guaranteed that the switch statement name, such as "person" will be in the first spot.

I know I can search through an array for a specific word, but I don't know how to add that to this sort of thing.

It sounds like a switch statement is not the appropriate approach for this problem. It uses strict comparison to compare the input value to each case value. Use an if statement instead. — Felix Kling
– Felix Kling, Commented Aug 16, 2014 at 3:03

Felix Kling · Accepted Answer · 2014-08-16 03:44:20Z

7

As I said in my comment, a switch statement doesn't appear the appropriate approach in this situation.

Since you are using jQuery, just use .hasClass:

if ($(e.target).hasClass('person')) {
  // do something
}

If you want to do something more complicated for multiple classes, you can create a class -> function mapping and simply iterate over the class list:

var classActions = {
    person: function(element) { /* do something */ },
    temp: function(element) { /* do something */},
    // ...
};

var classes = e.target.className.split(/\s+/);
$.each(classes, function(index, cls) {
    classActions[cls](e.target);
});

edited Aug 16, 2014 at 3:44

answered Aug 16, 2014 at 3:09

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

11 Comments

ntgCleaner Over a year ago

I was afraid of that! Thank you, I like your method of checking for all of the classes, I could use this in the future nicely.

ntgCleaner Over a year ago

Quick question, does the classActions variable have to be within the function that's calling it?

AstroCB Over a year ago

This is the best answer because it avoids .split() and .search() the way they are used in the other answers: this way is much cleaner.

Felix Kling Over a year ago

@ntgCleaner: Nope, it can be defined outside. You'd just have to pass all the dependencies/values the functions need to them (e.g. the event target).

ntgCleaner Over a year ago

Hmm, I'm getting a undefined is not a function error and I've declared the classActions variable globally. Any thoughts?

|

drneel · Accepted Answer · 2014-08-16 03:06:12Z

3

You'll want to use a combination of .split() and .indexOf(). Your code would be something like this:

var clicked = $(e.target).attr('class');
var classes = clicked.split(' ');

    if(classess.indexOf('person') > 0) {
      //do work
    } else if (classes.indexOf('foo') > 0) {
      //do work
    } else if (classes.indexOf('bar') > 0) {
      //do work
    }

MDN documentation on .split()

MDN documentation on .indexOf()

answered Aug 16, 2014 at 3:06

drneel

2,9055 gold badges32 silver badges49 bronze badges

1 Comment

Homer Over a year ago

shouldn't he check against -1, because it's zero-based ?

Spencer Wieczorek · Accepted Answer · 2014-08-16 03:16:39Z

1

Note that there are plenty of methods that allow you to do this. For example you can use string.search(substring) to check if a string contains your substring. If there is a substring it returns the index it was found (some number from 0 to n), otherwise if it's not found it returns -1. So if the search is larger or equal to 0, the substring exist.

if(clicked.search("person") >= 0)
    // "person" is in clicked

answered Aug 16, 2014 at 3:16

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

Collectives™ on Stack Overflow

javascript switch statement, if string contains substring

3 Answers 3

11 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related