用另一个类替换元素的类

时间:2014-07-04 17:33:51

标签: javascript jquery regex

难以置信的简单问题,但啤酒和足球的结合让我无可救药! (也一定是重复的,但我不能为爱而金钱找到它)

我有一个元素

<div class="inline-block" id="colour">

我想检查一下这个类是否含有bg-anycolour(即bg-red或bg-yellow或bg-blue等)

如果没有添加类bg-color(再次bg-color可以是bg-red或bg-white或bg-pink等等)

如果为true,则用bg-color替换bg-anycolour

我知道我正在寻找正则表达式匹配包含和替换,但不会受到以后可能添加的任何其他类的限制。

    function setColour(colour) {
    //need to add class br-{colour} but also to remove colour if already there
    if ($("#colour").attr("class").match(/(** what goes here **)/))
    {
       ** and replace?? **
    }
    else
    {
        $("#colour").addClass('bg-' + colour)
    }

由于

3 个答案:

答案 0 :(得分:1)

排序,为明确的问题道歉。

    function setColour(colour) {

    //check if class exists that has pattern bg-w+
    if ($("#colour").attr("class").match(/bg-\w+/))
    {
        var str = $("#colour").attr("class");
        var regex = /bg-\w+/;
        //get match and remove
        $("#colour").removeClass(regex.exec(str)[0]);            
    }
    //always add the new class
    $("#colour").addClass('bg-' + colour);
    };

答案 1 :(得分:0)

//need to add class br-{colour} but also to remove colour if already there
  function setColour(colour) {
    var ele = $("#colour");
    var classname = ele.attr("class") || "";
    var classStartIndex = classname.indexOf("bg-");
    var classEndIndex = -1;
    if (classStartIndex >= 0) {
        $.each((classname.substring(classStartIndex, classname.length)).split(""),
        function (i, val) {
            if (val == " ") {
                classEndIndex = i;
                return;
            }
        });

        if (classEndIndex == -1)
            classEndIndex = classStartIndex.length;
        else
            classEndIndex = classStartIndex + classEndIndex;

        ele.removeClass(classname.substring(classStartIndex, classEndIndex));
    }
    else {
        ele.addClass("bg-" + colour)
    }
}

答案 2 :(得分:0)

鉴于您的问题,评论以及您自己发布的答案中的说明,似乎您提出的问题是:

  

如何找到格式为bg-<colourName>的类名,并将<colourName>部分替换为新的,给定的颜色名称(如果存在),并添加 bg-colourName如果它不存在?

考虑到这一点 - 我对用例感到好奇,因为似乎不必要地复杂 - 我建议采用以下方法:

function setColour(colour) {
    $('#colour').attr('class', function (i, oldClasses) {
        return 'undefined' === typeof oldClasses ? 'bg-' + colour : oldClasses.replace(/\b(bg-[a-z]+)\b/i, function (a) {
            return 'bg-' + colour;
        });
    });
}

Representative JS Fiddle demo

参考文献: