添加类名,移除类名,正则表达式实现
核心部分:
var reg = new RegExp("(?:^|\\s+)" + target_class + "(?=\\s+|$)");
完整代码:
function addClass(el, clas){ var reg = new RegExp("(^|\\s)" + clas + "(\\s|$)"), trim = /^\s+|\s+$/g, classStr = el.className; classStr = classStr.replace(trim, ""); // 先删除类名前后的空格 el.className = reg.test(classStr) ? classStr : classStr ? classStr + " " + clas : clas; } function removeClass(el, clas){ var reg = new RegExp("(?:^|\\s+)" + clas + "(?=\\s+|$)", "g"), trim = /^\s+|\s+$/g, classStr = el.className; classStr = classStr.replace(reg, ""); el.className = classStr.replace(trim, ""); //最后删除类名前后空格 }
完整代码是从下面6个方面测试的:
目标类名: active,
- 前:<div class="active aa"></div>
- 中:<div class="aa active aa"></div>
- 后:<div class="aa active"></div>
- 唯一:<div class="active"></div>
- 干扰:<div class="active- aa"></div> <div class="-active aa"></div> <div class="-active- aa"></div>
- 重复:<div class="active active aa"></div>
完整代码自己测试没有出现问题,有兴趣的朋友可以自行检测!