addClass()、removeClass(),正则表达式实现

核心部分:

var reg = new RegExp("(^|[^-])\\b" + target_class + "\\b([^-]|$)");

原正则表达式若目标类名前后带有中划线 “-” 会出现匹配错误,如目标类名为 "active",干扰类名"-active"或"active-"也会匹配上。

var reg = new RegExp("\\s?\\b" + target_class + "\\b", "g");

完整代码:

function addClass(el, clas){
    var reg = new RegExp("(^|[^-])\\b" + clas + "\\b([^-]|$)"),
        trim = /^\s+|\s+$/g,
        classStr = el.className;

    classStr = classStr.replace(trim, ""); // 先删除类名前后的空格
    el.className = reg.test(classStr) ? classStr : classStr + " " + clas;
}

function removeClass(el, clas){
    var reg = new RegExp("(^|[^-])\\b" + clas + "\\b([^-]|$)", "g"),
        trim = /^\s+|\s+$/g,
        classStr = el.className;

    classStr = classStr.replace(reg, "");
    el.className = classStr.replace(trim, ""); //最后删除类名前后空格
}

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

时间: 2024-08-28 14:48:21

addClass()、removeClass(),正则表达式实现的相关文章

原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>addclass,removeclass,hasclass,toggleclass,getbyclass</title> </head> <body> <div class="div1" id="b

jQuery的addClass,removeClass和toggleClass方法

jQuery的addClass,removeClass和toggleClass方法,最后一个方法在某一情形之下,可以替代前面2个方法. 第一个方法addClass为元素添加一个class. 第二个方法removeClass,移除一个class. 第三个方法toggleClass是互斥class. <input id="Text1" type="text" /> 创建样式,当文本框focus时,文本框边框高亮和变宽,当blur时,恢复原来样式. .text

.addClass(),.removeClass(),.toggleClass()的区别

.addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式: 可以同时添加多个类名,空格符隔开 $("selector").addClass("className1 className2"); .removeClass("className")方法是用来给指定的元素移除类名,也就是说给指定元素移除样式: 可以同时移除多个类名,空格符隔开 $("selector")

ul li span addClass removeClass

<link type="text/css" href="./style/css/base.css" rel="stylesheet"><link type="text/css" href="./style/css/services.css" rel="stylesheet"><section class="select prop_nv distri

jQuery addClass removeClass toggleClass方法概述

通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性获取的不是class名称的数组,而是一个含有空格的字符串,这就使得多class操作变得很麻烦.同样的jQuery开发者也考虑到这种情况,增加了一个.addClass()方法,用于动态增加class类名 .addClass( className )方法 .addClass( className ) :

class 添加样式,删除,开关 【选择】addClass,removeClass,toggleClass

<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="script/jquery-1.11.0.min.js" type="text/javascript"></script> <style type="text/css"&g

addClass, removeClass, toggleClass(从jquery中抠出来)

<div id="d3" class="cur"></div> 1 var mylibs = (function(){ 2 var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, 3 core_trim = String.prototype.trim, 4 core_rspace = /\s+/, 5 rclass = /[\t\r\n]/g; 6 7 var trim = function(tex

原生JS实现addClass,removeClass,toggleClass

<style type="text/css"> div.testClass{ background-color:gray; } </style> <script type="text/javascript"> function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function ad

原生JS实现hasClass,addClass,removeClass

1.hasClass function hasClass(elem, cls){     cls = cls || '';     if(cls.replace(/\s/g, '').length == 0) return false;     return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' '); } 2.addClass function addClass(elem, cls){     if(!hasClas

addClass,removeClass

function addClass(obj,aclass){ if(obj.className == ''){ obj.className = aclass; }else{ var arr = obj.className.split(' '); var _index = arrIndexOf(arr,aclass); if(_index == -1){ obj.className += ' '+aclass; } } } function removeClass(obj,aclass){ if(