21

我从另一个 Stack Overflow 问题中找到了以下正则表达式：Change an element's class with 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);
})​
4

5 回答 5

41

那是因为replace实际上并没有修改你调用它的字符串；相反，它返回一个新字符串。所以：

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

（顺便说一句，您实际上不需要在原始 JavaScript 中执行此操作，因为 jQuery 对象提供了一种removeClass方法：http ://api.jquery.com/removeClass/ 。所以您可以编写：

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

或者：

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

)

于 2012-03-31T21:24:32.077 回答
23

别忘了classList。

el.classList.remove('boop');

http://jsfiddle.net/yXQL3/

于 2013-12-06T21:15:43.607 回答
6 
foo.className = foo.className.replace( /(?:^|\s)bar(?!\S)/ , '' );

或使用 jQuery（您似乎正在使用）：

foo.removeClass( 'bar' );
于 2012-03-31T21:24:39.563 回答
1

还有一个使用单词边界元字符\b的解决方案：

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

这可能适合某人，但请注意单词边界也出现在单词字符[A-Za-z0-9_]和破折号-字符之间。因此，类名，例如'different-bar-class'也将被替换为'different--class'。但是，与上述解决方案相反，" \b" 解决方案不会删除\s类名之前的空白字符，这可能是需要的，因此例如'firstbar bar'的字符串将最终成为'firstbar'。

于 2013-08-08T12:10:00.633 回答
0

OP 链接帖子中的最佳答案以及相关答案显示了如何在现代浏览器中使用纯 JavaScript 而没有正则表达式，使用类似的东西：

element.classList.remove("classname");

有关更多详细信息和示例，请参阅文档。我最喜欢的是用来相应toggle("classname")地添加或删除类名。

编辑：刚刚看到这里已经发布了一个类似的答案，所以应该去那里投票。将其留在这里作为链接和toggle位。

于 2021-09-22T17:57:44.653 回答