使用javascript从元素中删除classname

Question

我从另一个Stack Overflow问题中找到了以下正则表达式： 使用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'也将被替换，从而导致'不同级别' 。 然而，相对于上述的解决方案中，“ \\b ”溶液不会删除空白字符\\s类名，其中可能期望之前，使一个字符串例如“firstbar条”将最终成为“firstbar”。