Удалить имя класса из элемента с помощью JavaScript

Question

Я нашел следующее регулярное выражение в другом вопросе переполнения стека: Изменить класс элемента с помощью JavaScript

И с успехом использовал его в одной части моего сценария, но в другой он, похоже, не работает.

Я собрал очень минималистичный тестовый пример на jsFiddle, и он также не работает:

http://jsfiddle.net/ew47Y/1/

HTML:

<div class="foo" id="foo">
    hello
</div>​

JS:

$(document).ready(function(){
     foo = document.getElementById('foo');
     foo.className += ' bar foobar';
     alert(foo.className);
     foo.className.replace( /(?:^|\s)bar(?!\S)/ , '' )
     alert(foo.className);
})​

Answer 1

Это потому, что replace на самом деле не изменяет строку, в которой вы ее вызываете;скорее он возвращает новую строку.Итак:

     foo.className = foo.className.replace( /(?:^|\s)bar(?!\S)/ , '' )

(Кстати, вам на самом деле не нужно делать это в сыром JavaScript, поскольку объекты jQuery предлагают метод removeClass: http://api.jquery.com/removeClass/. Так что вы можете написать:

     $('#foo').removeClass('bar');

или:

     $(foo).removeClass('bar');

)

Answer 2

Не забудьте про classList.

el.classList.remove('boop');

http://jsfiddle.net/yXQL3/

Answer 3

foo.className = foo.className.replace( /(?:^|\s)bar(?!\S)/ , '' );

или с помощью jQuery (который вы, похоже, используете):

foo.removeClass( 'bar' );

Answer 4

Существует также решение, которое использует метасимвол границы слова \b:

foo.className.replace(/\bbar\b/g ,'');

Это может подойти кому угодно, но учтите, что граница слова встречается и между символами слова[A-Za-z0-9_] и тире - символ.Поэтому имя класса, например, 'Different-bar-class' также будет заменено, что приведет к 'different-class' .Однако, в отличие от вышеупомянутых решений, решение "\b" не удаляет символ пробела \s перед именем класса, что может быть желательным, поэтому строка, например, 'firstbar bar' закончится как 'firstbar' .