Удалить classname из элемента с помощью javascript

Я нашел следующее регулярное выражение из другой переполнение стека вопрос: изменить класс элемента с помощью 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);
})​
18
classname javascript regex replace

4 ответов

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

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

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

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

или:

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

)

39

Не забываем про classList.

el.classList.remove('boop');

http://jsfiddle.net/yXQL3/

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

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

foo.removeClass( 'bar' );
6

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

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

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

1