Question

我从另一个Stack Overflow问题中找到了以下正则表达式：Change an element's class with JavaScript

并且在我的部分脚本中成功使用了它，但在另一部分中它似乎失败了。

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

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

还有一个解决方案使用word boundary metacharacter \b：

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

这可以解决某些人的问题，但请注意，单词边界也会出现在单词字符[A-Za-z0-9_]和短划线-字符之间。因此，一个类名，例如'different-bar-class'也会被替换，导致'不同 - 类'。但是，与上述解决方案相反，“\b”解决方案不会删除类名之前的空白字符\s，这可能是所希望的，因此字符串例如是'firstbar bar'最终会以'firstbar'结束。

使用javascript从元素中删除classname

4 个答案: