Question

I have a div that looks like

<div class="draggable resizable abc table shadow"></div>

Clases are in no specific order. If I do $('div').attr('class') then I get a list of all the classes for that div. What I want is to only get classes that are not resizable, draggableor table. In this case i want abc shadow. How do I do this.

Answer 1

var all  = "draggable resizable abc table shadow";
var some = all.replace(/(?:^|\s)(resizable|draggable|table)(?=\s|$)/g, '');

console.log(some);
// " abc shadow"

console.log(some.replace(/^\s+|\s+$/g,''));
// "abc shadow"

console.log(some.split(/\s+/));
// ["", "abc", "shadow"]

Note that you don’t need the second replace (you don’t need to strip off leading and trailing whitespace) if all you want is a string that’s appropriate for setting the className to.

But then, if you’re trying to just remove a set of known classes from an element, far better to simply:

$(...).removeClass("draggable resizable table");

Alternative (without needing a regex):

var ignore = {resizable:1, draggable:1, table:1};
var all = "draggable resizable abc table shadow".split(' ');
for (var subset=[],i=all.length;i--;) if (!ignore[all[i]]) subset.push(all[i]);

console.log(subset);
// ["shadow","abc"]

console.log(subset.join(' '));
// "shadow abc"