jquery find class & str regex find (v4)

Revision 4 of this benchmark created by Kyle A. Matheny on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="container">
 <span class="_f_aaa _f_bbb _f_ccc _f_ddd"></span>
 <span class="_f_eee"></span>
 <span class="_f_fff"></span>
</div>
<script>
  var finalSize = 0;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jquery find class
/*Returns with 3 objects*/
finalSize = $("._f_aaa, ._f_bbb, ._f_ccc, ._f_ddd, ._f_eee, ._f_fff").size();
ready
jquery find attr
/*fixed ^= from =^ Returns 3 objects*/
finalSize = $('[class^="_f_"]').size();
ready
str find _f_
/*Returns that there were 6 matches, NOT OBJECTS*/
finalSize = $("#container").html().match(/_f_[0-9a-z]+/g).length;
ready
jQuery find attr 2
/*Fixed ^= from =^ Returns 3 objects*/
finalSize = $('#container').find('[class^="_f_"]').size();
ready
Native JS
/*Returns 3 objects*/
var five = document.getElementById('container').children,
    six = [],
    j = 0,
    i = five.length;
while (i--) {
 if (five[i].className.match(/_f_[0-9a-z]+/g).length > 0) {
  six[j++] = five[i];
 }
}

finalSize = six.length;
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published on
  • Revision 2: published by Kyle A. Matheny on
  • Revision 3: published by Kyle A. Matheny on
  • Revision 4: published by Kyle A. Matheny on