Question

我正在根据某些条件从HTML元素中删除类。这是我的正则表达式模式：

elem.className = elem.className.replace(/shake|progress|done/g, '');

但是这种模式存在一个问题，即如果有人添加了另一个类shaker，那么它也将被删除。所以我将模式改为：

elem.className = elem.className.replace(/(^|\s)shake(\s|$)|(^|\s)progress(\s|$)|(^|\s)done(\s|$)/g, '');

现在只有在整个单词匹配时才会删除。但现在它删除了单词周围的空格。我不知道如何解决这个问题。请帮帮我。

Answer 1

这不是正则表达式的工作。请改为与classList互动。

elem.classList.remove("shake", "progress", "done"); // removes all 3 class values

Answer 2

classList.remove是最好的方法。

这回答了你的问题：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="tt" class="eins zwei drei meins">ABC</div>
</body>
  <script>
    tt.className=tt.className.replace(/\beins|zwei|drei/g, '');
  </script>

</html>

Answer 3

我同意其他人classList是这里的方式，但如果你想匹配整个单词，你可以做到这一点。在空格上拆分className并过滤要删除的类列表中的所有项目：

const classes = elem.className.split(' ');
const remove = ['shake', 'progress', 'done'];

elem.className = classes.filter(cls => !remove.includes(cls)).join(' ');

从正则表达式js中的匹配模式中删除空格

3 个答案: