javascript - 使用 JavaScript 移除类

Question

我正在尝试使用 JavaScript 添加/删除类。 (请不要发布有关 JQuery 的信息，因为那无关紧要。)我遇到了 this answer ，建议使用正则表达式删除类。这是代码:

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

我将添加和删除同一个类。问题是，我这样做了多少次，就是在类名中添加了多少个空格。例如，如果我添加和删除类 5 次，则 2 个类名之间将有 5 个空格。

如何防止空格出现？

CodePen

代码片段

var myDiv = document.getElementById('myDiv'),
  par = document.getElementById('par');

myDiv.addEventListener('click', function() {
  if (hasClass(myDiv, 'tryThis')) {
    removeClass(myDiv, 'tryThis');
  } else {
    addClass(myDiv, 'tryThis');
  }
  console.log(myDiv.className);
});



function hasClass(ele, cls) {
  return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
  if (!hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
    ele.className = ele.className.replace(reg, ' ');
  }
}

#myDiv {
  width: 100px;
  height: 100px;
  background-color: green;
}
.tryThis {
  border: 2px solid orange;
}

<div id="myDiv" class="hello">Click Me</div>
<p id="par"></p>

Answer 1

有两个解决方案。第一个(也是最简单的)是使用 classList .该解决方案的唯一缺点是您将无法继续支持比其实现更早的浏览器。

至于第二个解决方案，它保持对旧浏览器的支持并扩展您的正则表达式解决方案，我建议将一个函数传递给 replace检查类名的两边是否都是空格。如果是，则返回 ' '，否则返回 ''。

function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
    ele.className = ele.className.replace(reg, function(match) {
      if (match.match(/^\s.+\s$/) !== null) {
        return ' ';
      } else {
        return '';
      }
    });
  }
}

编辑:还有使用 shim、sham、shiv、polyfill 等的选项。