0

I need to remove all classes from element starts with 'layout-'

I try:

var regex = new RegExp('\b' + 'layout-' + '.*?\b', 'g');
$(el)[0].className = $(el)[0].className.replace(regex, '');

but it doesn't work. Solution could be in jQuery. Any idea?

quarky
  • 710
  • 2
  • 13
  • 36
  • You want to remove all classes, or just the classes that start with "layout-"? For example, `class="class1 layout-something"` - should this keep `class1`? – musefan Oct 21 '13 at 10:59
  • possible duplicate of [JQuery removeClass wildcard](http://stackoverflow.com/questions/2644299/jquery-removeclass-wildcard) – palaѕн Oct 21 '13 at 11:09

2 Answers2

5

The RegExp you have posted in the question is not working because the \b is not escaped as \\b. Hence the actual RegExp is becoming /layout-.*?/g instead of /\blayout-.*?\b/g. Doing the below change would work.

var regex = new RegExp('\\b' + 'layout-' + '.+?\\b', 'g');

You can also try like the below. This removes all classes that are like layout-X

var regex = /(\s)*(layout-.*?)(?=\s)/g; 
$('#test')[0].className = $('#test')[0].className.replace(regex, '');

Demo Fiddle

Input: class=sample layout-10 layout-9 sample1 slayout

Output: class=sample sample1 slayout

RegExp Explained:

\s - Any whitespace character

(layout-.*?) - Capture all values like layout-X where X can be any character any number of times

(?=\s) - Look ahead upto the next whitespace character (meaning till end of word)

As pointed out by musefan in the comments var regex = /\blayout-.+?\b/g; will also do the job.

Harry
  • 87,580
  • 25
  • 202
  • 214
  • 1
    Was just about to post an answer suggesting that it seems to be a problem with the regex definition. This regex also seems to work: `/\blayout-.+?\b/g` – musefan Oct 21 '13 at 11:22
  • Right, true. Just now re-checked after you posted. Also, the one I posted needs improvement to `(\s)*` initially. The current one in my answer wont replace `layout-X` if it is the first class. Correcting it now. – Harry Oct 21 '13 at 11:25
  • 1
    @musefan: Ah got it, the regex in question is not working because the `\b` isn't escaped as `\\b` :D Because of that the actual regex that is formed is becoming `/layout-.+?/g`. – Harry Oct 21 '13 at 11:31
1
$("[class^='layout-']").removeAttr('class');

reference attribute-starts-with-selector

removeAttr

Rituraj ratan
  • 10,260
  • 8
  • 34
  • 55
  • I am not sure if the OP wants to remove the whole class attribute, I have asked for clarification, but there attempt seems to suggest they just want to remove the `layout-` classes – musefan Oct 21 '13 at 11:01
  • I need to remove all classes from element starts with 'layout-' op said and i have answer this thanks for focus @musefan – Rituraj ratan Oct 21 '13 at 11:02
  • The example code also suggests that the OP already has the element, so may not even need a selector at all... it's not a very well explained question to be fair – musefan Oct 21 '13 at 11:12
  • @musefan: Yep, agreed. Initially I thought the same as you did, but re-reading it tells me that Rituraj has a point. – Harry Oct 21 '13 at 11:16