How to Check If an Element Contains a Class Name Using JavaScript?

Let's suppose we have the following HTML element:

<div id="example" class="foo-bar baz"></div>

To check whether a certain class exists on the element, we can use any of the following methods:

Using Element.classList.contains()

Using Element.classList returns a live DOMTokenList. This means that we can use DOMTokenList.contains() method to check whether the Element.classList contains a certain class name or not. For example:

const elem = document.getElementById('example');

console.log(elem.classList.contains('foo-bar')); // output: true
console.log(elem.classList.contains('baz')); // output: true

console.log(elem.classList.contains('foo')); // output: false
console.log(elem.classList.contains('non-existent')); // output: false

Since, Element.classList is "live" it means that any classes added to it dynamically will also be taken into account.

To support Element.classList on old browsers you can use a polyfill (such as the one on MDN).

Using Element.matches()

The matches() method can be used to check if the element itself would be selected by the provided selector or not; accordingly it returns a boolean true or false. To use this method to check if a class name exists on an element itself, you can do the following:

const elem = document.getElementById('example');

console.log(elem.matches('.foo-bar')); // output: true
console.log(elem.matches('.baz')); // output: true

console.log(elem.matches('.foo')); // output: false
console.log(elem.matches('.non-existent')); // output: false

Using String.prototype.split()

Using split(), you can convert the space-separated list of classes (that you get via the Element.className property) into an array. After that you can use Array.prototype.includes() (or Array.prototype.indexOf()) to check if the resulting array contains the specified class name. For example:

const elem = document.getElementById('example');
const classNamesArr = elem.className.split(/\s/);

console.log(classNamesArr); // output: ['foo-bar', 'baz']

console.log(classNamesArr.includes('foo-bar')); // true
console.log(classNamesArr.includes('baz')); // true

console.log(classNamesArr.includes('foo')); // output: false
console.log(classNamesArr.includes('non-existent')); // output: false

Using a Regular Expression With RegExp.prototype.test()

You can use the following regular expression to check whether a class name exists or not in a string of class names (returned by the Element.className property):

const elem = document.getElementById('example');
const classNames = elem.className;

console.log(classNames); // output: 'foo-bar baz'

console.log(/(^|\s)foo-bar(\s|$)/.test(classNames)); // true
console.log(/(^|\s)baz(\s|$)/.test(classNames)); // true

console.log(/(^|\s)foo(\s|$)/.test(classNames)); // output: false
console.log(/(^|\s)non-existent(\s|$)/.test(classNames)); // output: false

The regular expression checks whether the class name starts-with, ends-with, and/or has a space character preceeding or following the class name. This helps ensure, false positives such as "foo" returning true for "foo-bar" does not happen.