Get a number from a class of a HTML element I've got an element with multiple classes in a page and I need to dynamically get the number at the end of a specific class name.

Example:

&lt;div id="gallery-1" class="gallery galleryid-555 gallery-columns-3 gallery-size-thumbnail"&gt;
    ...
&lt;/div&gt;


In particular I've to get "3" from gallery-columns-3.

I've made this function in Javascript/Jquery, but I think that there is a better solution.

//return the number of columns from gallery class
function get_gallery_columns($el){
    var class_arr = $el.attr('class').split(/\s+/).filter(function (el) {
        return el.includes("gallery-columns-");
    });

    if(class_arr.length &lt; 1){
        return false;
    }

    return parseInt(class_arr[0].replace(/\D/g,''));
}


I wanted to do this to dynamically create the layout of Wordpress galleries.

$(document).ready(function() {

//galleries selector
var $galleries = $('div[class*=gallery-columns-]');
fix_gallery($galleries);

//responsive gallery on resize
$(window).on('resize', function(){
    fix_gallery($galleries);
});

//fixes galleries size
function fix_gallery($galleries){
    $galleries.each(function(index) {
        var $current_gall = $(this);
        var n_cols = get_gallery_columns($current_gall);

        if(n_cols === false){
            return;
        }

        //if there are columns, unwrap images from them
        $current_gall.find(".gallery-group").replaceWith(function() { return $(this).contents(); });

        //change columns on mobile/tablet
        if (window.matchMedia("(max-width: 640px)").matches &amp;&amp; n_cols &gt; 2) {
            n_cols = 2;
        } else if (window.matchMedia("(max-width: 800px)").matches &amp;&amp; n_cols &gt; 4) {
            n_cols = 4;
        } else if (window.matchMedia("(max-width: 980px)").matches &amp;&amp; n_cols &gt; 6) {
            n_cols = 6;
        }

        //gallery pictures selector
        var $pictures = $current_gall.find('.gallery-item');
        //number of pictures
        var pic_number = $pictures.length;

        for (var i = 0;i &lt;= pic_number; i += n_cols){
            $pictures.filter(':eq('+i+'),:lt('+(i+n_cols)+'):gt('+i+')').wrapAll('&lt;div class="gallery-group" /&gt;');
        }

        $pictures.width((100/n_cols) + '%');

    });
}

//return the number of columns from gallery class
function get_gallery_columns($el){
    var class_arr = $el.attr('class').split(/\s+/).filter(function (el) {
        return el.includes("gallery-columns-");
    });

    if(class_arr.length &lt; 1){
        return false;
    }

    return parseInt(class_arr[0].replace(/\D/g,''));
}

});
You might use something like the snippet below, that is:


sure a bit shorter
probably faster, because:


using find() rather than filter() makes the loop stop as soon as the desired result is got
looking for the involved class-prefix and extracting the number are both processed in the same statement

and browser agnostic, while includes() is not recognized by IE




function get_gallery_columns($el) {
  var matches, result = false;
  $el.attr('class').split(/\s+/).find(function (className) {
    if (matches = className.match(/^gallery-columns-(\d+)$/)) {
      result = +matches[1];
      return true;
    }
  });
  return result;
}

console.log(get_gallery_columns($('#gallery-1')));
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="gallery-1" class="gallery galleryid-555 gallery-columns-3 gallery-size-thumbnail"&gt;
    ...
&lt;/div&gt;