在我们经常写的效果当中，有一些效果是通过类名的改变实现JS的基本行为，例如Tab切换。在Tab切换中，我们通过分别为标题和内容设置和移除select、show这两种类名，实现内容区域的显示和隐藏，实现标题样式的变化。效果实现了，但是我们每个人可能都在考虑，className的设置是不是会有问题？如果在原有的标签中存在其他类名，那么使用className进行类名赋值，会直接覆盖原有类名，从而出现问题。这时候，学过JQ的各位可能会想到addClass以及removeClass等方法，很方便的解决了这个问题。今天我们就是用原生实现这样几个功能——添加、移除、替换类名。也借助这个过程理解功能的原理。今天就来说说HTML5-类库系列 类名的各种操作 类名操作。

第一步 增加类名 addClass

增加类名应该说是这三种功能当中最简单的一个，类名是一个字符串，只需要使用字符串的连接就能够实现这个功能。

  1. function addClass(obj, newClassName) {
  2.     return obj.className += " " + newClassName;
  3. }

我们定义一个功能函数，函数名称为addClass，需要为某个元素增加某个类名，因此这里采用两个参数，作为这个函数的接口。通过obj.className获取到当前该元素的类名，然后在其基础之上，与新类名使用字符串进行连接。注意两种类名之间需要有一个空格。

这时候，细心的同学会发现，如果该元素初始没有类名，使用函数处理之后，会在最前面多一个空格。这个地方个人认为没有必要处理，因为它对我们的任何操作是没有什么影响的。

第二步 移除类名 removeClass

移除类名的功能函数就没有增加类名那么简单了~需要使用数组以及字符串等各种方法进行实现。当然也可以通过正则去实现。关于正则的方法，在下面的替换类名部分我们再讲，这里我们重点讲字符串与数组的处理方法。

移除类名的基本原理是：首先我们将元素的类名进行拆分，将这种class="HTML5 lili test"，一个元素多个类名的内容，根据空格进行拆分，拆分并放置于数组当中。之后我们将数组中的类名分别和需要移除的类名进行比较，如果相同则删除掉。当所有的类名均比较完成之后，我们使用数组的join方法，将修改后的数组再拼合回字符串，赋值给元素的className(类名)即可。

具体实现代码：

  1. function removeClass(obj, removeClassName) {
  2.     var classArr = obj.className.split(/\s+/);
  3.     var len = classArr.length;
  4.     for (var i = 0; i < len; i++) {
  5.         if (classArr[i] == removeClassName) {
  6.             delete classArr[i];
  7.         };
  8.     };
  9.     obj.className = classArr.join(" ");
  10. }

第三步 替换类名

替换类名这个部分，看上去很简单，包括我自己在进行操作的时候，一开始也没有注意存在的问题。如果使用正则我们发现相对要简单很多，只需要使用replace方法即可。

  1. function replaceClass(obj, newClassName, oldClassName) {
  2.     obj.className = obj.className.replace(oldClassName, newClassName);
  3. }

在这里，我们传递了三个参数，分别是要修改类名的元素、需要替换的旧类名、新类名。使用replace方法，直接进行实现。实现之后自己进行了测试，发现在一种情况下是存在问题的。如下的测试用例，我们希望使用new替换html，按照我们的期望，是将class="wrap html5 html"替换为class="wrap html5 new"，但是执行的结果反而是class="wrap new5 html"。

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>H5course - 刘国利 独行冰海</title>
  6.     <link rel="stylesheet" href="../css/reset.css">
  7.     <script src="../js/core.js"></script>
  8. </head>
  9. <body>
  10.     <div>
  11.         <p>HTML5 - 类库构建</p>
  12.         <p id="con" class="wrap html5 html">独行冰海 - 利利 - 刘国利</p>
  13.         <p class="wrap">梦幻雪冰 - 陈能堡</p>
  14.     </div>

  16.     <script>
  17.         replaceClass(con, "new", "html");
  18.     </script>
  19. </body>
  20. </html>

造成上述问题的原因是，正则匹配上的问题。我们需要确定是new为开头并且也是以new为结尾，才正常匹配。换句话说，就是使用/\bhtml\b/能够实现合理的匹配。

问题又来了，我们的html是从外部传入到函数内的，html实际上是oldClassName这个变量的变量值。那么我们能不能把\bhtml\b改成\boldClassName\b呢？很明显不现实的。想解决这个问题，我们先得知道如何在正则当中放置变量。

我们生成正则的方法有两种，一种是使用正则字面量的方式进行生成——/正则内容/，另一种是使用构造函数进行生成。使用正则字面量的方法生成时，会发现无论怎么添加变量，变量都会被当做正则的一部分。那么此时，使用第二种方法，正则的构造函数，就能够解决这个问题了。var reg = new RegExp("\\b"+oldClassName+"\\b"); 注意一点：反斜杠需要进行转义。

基本问题解决了，一起来看看我们的功能代码吧~

  1. function replaceClass(obj, newClassName, oldClassName) {
  2.     var reg = new RegExp("\\b"+oldClassName+"\\b");
  3.     obj.className = obj.className.replace(reg, newClassName);
  4. }

当然，还有一种方法能够实现，使用eval，不过，这种方法但凡学过AJAX部分的同学都知道，会影响JS性能。不过，在这里我还是给出eval的写法：var reg = eval("\\b"+oldClassName+"\\b");

最后，我们解决我们之前遗留的一个问题，如何用正则的方法实现类名的移除？巧妙的使用replace即可，我们只需要将newClassName换成""（空字符串）即可。

于是~完整版代码新鲜出炉喽~~~

  1. /*
  2. * 类名处理 增加、删除、替换
  3. * 替换和移除都使用replaceClass进行控制
  4. * 作者：独行冰海 - 利利
  5. */
  6. function addClass(obj, newClassName) {
  7.     return obj.className += " " + newClassName;
  8. }
  9. function replaceClass(obj, oldClassName, newClassName) {
  10.     var reg = new RegExp("\\b"+oldClassName+"\\b");
  11.     if (newClassName) {
  12.         obj.className = obj.className.replace(reg, newClassName);
  13.     } else {
  14.         obj.className = obj.className.replace(reg, "");        
  15.     }