jQuery - extract class name that 'starts with' prefix

Question

My items have the following classes:

<div class="class-x some-class-1 other-class"></div>
<div class="some-class-45 class-y"></div>
<div class="some-class-123 something-else"></div>

I'm wondering if there is an easy way to:

Grab only all classes with some-class- prefix.
Remove them from each element.
Have their names (not corresponding DOM elements) in a variable?

I can easily select such elements with jQuery( "div[class^='some-class-'], div[class*=' some-class-']" ) but how its class name could be extracted with the shortest and the most readable code to a variable (can be some global object)?

See answers to: [Get Class List for Element with jQuery](http://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery). — Trylks, Jun 28 '13 at 15:02
@Trylks Great! That actually solves my problem with even better method! Thanks! (however, it's a long way to extract this name) — Atadj, Jun 28 '13 at 15:02

PSL · Accepted Answer · 2013-06-28T15:10:50.240

20

Like this?

var arrClasses = [];
$("div[class*='some-class-']").removeClass(function () { // Select the element divs which has class that starts with some-class-
    var className = this.className.match(/some-class-\d+/); //get a match to match the pattern some-class-somenumber and extract that classname
    if (className) {
        arrClasses.push(className[0]); //if it is the one then push it to array
        return className[0]; //return it for removal
    }
});
console.log(arrClasses);

Fiddle

.removeClass() accepts a callback function to do some operation and return the className to be removed, if nothing to be removed return nothing.

edited Jun 28 '13 at 15:10

answered Jun 28 '13 at 15:04

PSL

123,204
21
253
243

2

Worked great! Clean and elegant! – Atadj Jun 28 '13 at 15:17
Genius solution. – The J Mar 28 '20 at 22:07

nderscore · Answer 2 · 2018-06-19T19:52:24.823

4

You could loop through all the elements, pull the class name using a regular expression, and store them in an array:

var classNames = [];
$('div[class*="some-class-"]').each(function(i, el){
    var name = (el.className.match(/(^|\s)(some\-class\-[^\s]*)/) || [,,''])[2];
    if(name){
        classNames.push(name);
        $(el).removeClass(name);
    }
});
console.log(classNames);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class-x some-class-1 other-class"></div>
<div class="some-class-45 class-y"></div>
<div class="some-class-123 something-else"></div>

edited Jun 19 '18 at 19:52

answered Jun 28 '13 at 15:05

nderscore

4,182
22
29

Demo is a dead link – An Capone Jun 01 '18 at 02:59
@VulgoAlias The link was not dead, but I've moved the code from it into the answer anyway :) – nderscore Jun 19 '18 at 19:52

Ja͢ck · Answer 3 · 2013-06-28T23:53:44.010

You can iterate over each found node and iterate over the classes to find a match; if found, remove the class and log it:

var found = [];

$('div[class*="some-class-"]').each(function() {
  var classes = this.className.split(/\s+/),
  $this = $(this);

  $.each(classes, function(i, name) {
      if (name.indexOf('some-class-') === 0) {
          $this.removeClass(name);
          found.push(name);
      }
  });
});

Note that a selector like div[class*="some-class-"] is pretty expensive and since you need to perform extra processing anyway, it would be easier to just iterate over all div tags and process them:

var elements = document.getElementsByTagName('div'),
found = [];

$.each(elements, function(i, element) {
    var classes = element.className.split(/\s+/);

    $.each(classes, function(i, name) {
        if (name.indexOf('some-class-') === 0) {
            $(element).removeClass(name);
            found.push(name);
        }
    });
});

Modern browsers expose Element.classList which you can use to manipulate class names and Array.forEach for iteration:

var found = [];

[].forEach.call(document.getElementsByTagName('div'), function(element) {
    (function(names, i) {
        while (i < names.length) {
            var name = names[i];
            if (name.indexOf('some-class-') === 0) {
                names.remove(name);
                found.push(name);
            } else {
                ++i;
            }
        }
    }(element.classList, 0));
});

Damien · Answer 4 · 2013-06-28T15:25:26.590

0

The easy way

You clould create your own filter :

$.fn.hasClassStartsWith = function(className) {
    return this.filter('[class^=\''+className+'\'], [class*=\''+className+'\']');
}

var divs = $('div').hasClassStartsWith("some-class-");
console.log(divs.get());

See fiddle

edited Jun 28 '13 at 15:25

answered Jun 28 '13 at 15:09

Damien

8,889
3
32
40

jQuery - extract class name that 'starts with' prefix

4 Answers4