Question

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

我有一个元素

<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)
    }

由于

Answer 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);
    };

Answer 2

//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)
    }
}

Answer 3

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

如何找到格式为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

参考文献：

JavaScript的：
jQuery的：
- attr()。

用另一个类替换元素的类

3 个答案: