使用 removeClass 正则表达式删除多个类前缀答案

【问题标题】：Using removeClass regex to remove multiple class prefixes使用 removeClass 正则表达式删除多个类前缀
【发布时间】：2020-11-27 22:50:55
【问题描述】：

下面的 jQuery 搜索并删除任何包含我的前缀 bg- 的类。它用于在主体上删除任何以bg- 为前缀的类，即bg-red bg-opacity 等等。

我想编辑它以便能够处理多个前缀，即 bg- 和 text-，但我正在努力让它工作。

有人熟悉正则表达式并可以提供帮助吗？

body.removeClass(function (index, css) {
  return (css.match (/(^|\s)bg-\S+/g) || []).join(' ');
});

【问题讨论】：

你可以改用\b(?:bg|text)-\S+
另一个问题在一个简单的答案中途结束。 (^|\s)(bg-|ab-|cd-)\S+ 允许前缀bg-、ab-、cd- 演示regexr.com/5h67s
是的，这个已经关闭真的很令人沮丧，另一个问题并没有为我解决这个问题

【解决方案1】：

与正则表达式的开头搜索字符串 (^) 或 (|) 空格 (\s) 的开头的方式大致相同，您可以使用相同的方法搜索前缀的变体

(^|\s)(bg-|ab-|cd-)\S+

这允许前缀bg-、ab-、cd-进行演示

【讨论】：

【解决方案2】：

您无需将其拆分即可再次加入。刚刚用了替换。

同样不加空格，只返回第一个括号匹配。

body.removeClass(function (index, css) {
  return css.replace(/(^|\s)(bg|text)-\S+/g), '$1');
});

【讨论】：

【解决方案3】：

您可以直接在.attr("class") 上使用String.prototype.replace()

$("div").attr("class", (i, cl) => cl.replace(/(^|\s)(bg|text)-\w+/g, ""));

console.log($("div").attr("class")); // "foo bar-ola baz"

<div class="foo bg-red bar-ola baz text-blue"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：