使用javascript从元素中删除classname

我从另一个堆栈溢出问题中找到以下正则表达式：

在我的剧本中成功地使用了它，但在另一个剧本中似乎失败了

我在JSFIDLE上创建了一个非常简单的测试用例，但它也失败了：

HTML:

---

这是因为

replace

实际上并不修改调用它的字符串；相反，它返回一个新字符串。因此：

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

（顺便说一下，您实际上不需要在原始JavaScript中执行此操作，因为jQuery对象提供了

removeClass

方法：。因此您可以编写：

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

或：

)

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

---

还有一种解决方案使用：

---

这可能适合某人，但请注意单词边界也出现在单词字符

[a-Za-z0-9.

和破折号

-

字符之间。因此，类名（例如“different bar class”）也将被替换，从而产生“different--class”。但是，与上述解决方案相反，“

\b

”解决方案不会删除类名前的空白字符

\s

，这可能是需要的，因此字符串例如“firstbar”将以“firstbar”结尾。

不要忘记

类列表

el.classList.remove（'boop'）；

---

我被jQuery和非jQuery的混合搞糊涂了，我正在写一个库，我发现让一个库需要另一个库是不好的做法。请检查这个答案纯JS函数：

function removeClass（e，c）{e.className=e.className.replace（new RegExp（'（？：^ | \\\\s）+c+（？！\\s）；“”）

如果要删除所有出现的类名，请在正则表达式末尾使用：

foo.className.replace（/（^ |\s）bar（？！\s）/g'，）

。顺便说一句，这里不需要使用

（？：）

。请注意，这里不适合使用

foo.className.replace（/\bbar\b/g，”）

，因为单词边界也出现在单词字符

[a-Za-z0-9.

和破折号

-

字符之间。因此，类名（例如“different bar class”）也将被替换，从而产生“different--class”。但是，与上述解决方案相反，“

\b

”解决方案不会删除类名前的空白字符

\s

，因此字符串（例如“firstbar”）将以“firstbar”结尾。@Adam:我不知道你在说什么。您的评论是本页上唯一提到

\b

的地方，因此您几乎不需要解释为什么它不合适。使用一个组是必要的；您个人对捕获组

（…）

而不是非捕获组

（？：…）

的偏好对其他任何人都不感兴趣。很抱歉造成混淆。我主要是想指出，上面的解决方案（与同样可能的“

\b

”解决方案相反）删除了可能不需要的空白。我重写了这个作为回答。我们现在可以在这里删除最后3条多余的评论。不（仅）在IE 8、9和Opera Mini 8上工作

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

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

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

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

foo.removeClass( 'bar' );

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