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

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

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

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

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);
})

Ответ 1

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

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

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

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

или

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

)

Ответ 2

Не забывайте о classList.

el.classList.remove('boop');

http://jsfiddle.net/yXQL3/

Ответ 3

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

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

foo.removeClass( 'bar' );

Ответ 4

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

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

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