Run results for: $.hasClass vs RegExp vs indexOf vs classList

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:76.0) Gecko/20100101 Firefox/76.0

Browser: Firefox 76

Operating system: Linux

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
$.hasClass	2629892.0 Ops/sec
RegExp	10566540.0 Ops/sec
Dry RegExp	2976798.0 Ops/sec
indexOf	11131760.0 Ops/sec
classList	14107400.0 Ops/sec
hasClassString	7804568.0 Ops/sec

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div class="foobar" id="node">Hello</div>

Script Preparation code:

var node = document.getElementById('node');
var className = node.className;
var rx = new RegExp('\\b' + className + '\\b');
function hasClassString(e, c) {
  var s = e.className, i = s.indexOf(c);
  return i != -1 && (s.charCodeAt(i - 1) || 32) == 32 && (s.charCodeAt(i + c.length) || 32) == 32;
};

Tests:

$.hasClass
var hasClass = $(node).hasClass(className);
RegExp
var hasClass = rx.test(node.className);
Dry RegExp
var drx = new RegExp('\\b' + className + '\\b'); var hasClass = drx.test(node.className);
indexOf
var hasClass = node.className.indexOf(className) !== -1;
classList
var hasClass = node.classList.contains(className);
hasClassString
var hasClass = hasClassString(node, className);

Run results for: $.hasClass vs RegExp vs indexOf vs classList

$.hasClass

RegExp

Dry RegExp

indexOf

classList

hasClassString