HTML5-类库系列 类名的各种操作

在我们日常编写的页面效果中，有一些效果是通过改变类名来实现 JavaScript 的基本行为，例如 Tab 切换。在 Tab 切换效果里，我们通过为标题和内容分别设置和移除 select、show 这两种类名，来实现内容区域的显示和隐藏，以及标题样式的变化。

然而，当我们使用 className 来设置类名时，可能会遇到问题。如果原标签中已经存在其他类名，直接使用 className 进行类名赋值，会覆盖原有的类名。对于学过 jQuery 的开发者来说，可能会想到使用 addClass 和 removeClass 等方法来解决这个问题。今天，我们将使用原生 JavaScript 来实现添加、移除和替换类名这几个功能，并借此深入理解这些功能的实现原理。

第一步：增加类名 addClass

增加类名是这三种功能中最简单的一个。由于类名本质上是一个字符串，我们可以通过字符串连接的方式来实现添加类名的功能。

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

上述代码定义了一个名为 addClass 的函数，该函数接收两个参数：obj 表示要操作的元素，newClassName 表示要添加的新类名。函数通过 obj.className 获取元素当前的类名，然后将其与新类名用空格连接起来。

需要注意的是，如果元素初始时没有类名，使用该函数处理后，类名最前面会多一个空格。不过，这个空格对我们的操作并没有影响，因此可以不做处理。

第二步：移除类名 removeClass

移除类名的功能相对复杂一些，需要使用数组和字符串的相关方法来实现，也可以通过正则表达式来实现。这里我们重点介绍字符串与数组的处理方法。

移除类名的基本原理是：首先将元素的类名根据空格拆分成数组，然后遍历数组，将与需要移除的类名相同的元素删除，最后使用数组的 join 方法将修改后的数组重新拼接成字符串，并赋值给元素的 className。

function removeClass(obj, removeClassName) {
var classArr = obj.className.split(/\s+/);
var len = classArr.length;
for (var i = 0; i < len; i++) {
if (classArr[i] == removeClassName) {
delete classArr[i];
}
}
obj.className = classArr.join(" ");
}

第三步：替换类名

替换类名看似简单，但实际上存在一些问题。我们可以使用正则表达式的 replace 方法来实现类名替换。

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

上述代码定义了一个名为 replaceClass 的函数，该函数接收三个参数：obj 表示要操作的元素，newClassName 表示新类名，oldClassName 表示要替换的旧类名。然而，这种实现方式存在一个问题，例如我们希望将 class="wrap html5 html" 中的 html 替换为 new，但实际执行结果却是 class="wrap new5 html"。

造成这个问题的原因是正则匹配的问题。我们需要确保匹配的类名是独立的，即使用 /\bhtml\b/ 来实现合理的匹配。但由于 html 是从外部传入的变量 oldClassName 的值，我们不能直接将 /\bhtml\b/ 写成 /\boldClassName\b/。

为了解决这个问题，我们可以使用正则表达式的构造函数来生成动态的正则表达式：

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

另外，还可以使用 eval 方法来实现，但 eval 会影响 JavaScript 的性能，因此不推荐使用。

var reg = eval("\\b"+oldClassName+"\\b");

最后，我们可以利用 replaceClass 函数来实现类名的移除，只需要将 newClassName 替换为空字符串即可。

以下是完整的代码：

/*
* 类名处理 增加、删除、替换
* 替换和移除都使用replaceClass进行控制
* 作者：独行冰海 - 利利
*/
function addClass(obj, newClassName) {
return obj.className += " " + newClassName;
}

function replaceClass(obj, oldClassName, newClassName) {
var reg = new RegExp("\\b"+oldClassName+"\\b");
if (newClassName) {
obj.className = obj.className.replace(reg, newClassName);
} else {
obj.className = obj.className.replace(reg, "");
}
}

通过以上代码，我们使用原生 JavaScript 实现了类名的添加、移除和替换功能。