首页 > 技术文章 > 添加类名,移除类名,正则表达式实现

timeHello 2014-10-23 10:24 原文

核心部分:

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,
  1. 前:<div class="active aa"></div>
  2. 中:<div class="aa active aa"></div>
  3. 后:<div class="aa active"></div>
  4. 唯一:<div class="active"></div>
  5. 干扰:<div class="active- aa"></div> <div class="-active aa"></div> <div class="-active- aa"></div>
  6. 重复:<div class="active active aa"></div>

完整代码自己测试没有出现问题,有兴趣的朋友可以自行检测!

推荐阅读